Proptype dizisini şekle tepki ver

245

Bir bileşene iletilen bir nesne dizisinin aslında belirli bir şekildeki bir nesne dizisi olmasını sağlamak için prototipleri kullanmanın yerleşik bir yolu var mı?

Belki böyle bir şey?

annotationRanges: PropTypes.array(PropTypes.shape({
    start: PropTypes.number.isRequired,
    end: PropTypes.number.isRequired,
})),

Burada süper belirgin bir şey mi eksik? Bunun çok rağbet göreceği anlaşılıyor.

arrays reactjs react-proptypes

— majorBummer
kaynak

371

React.PropTypes.shape()Bağımsız değişken olarak aşağıdakileri yapabilirsiniz React.PropTypes.arrayOf():

// an array of a particular shape.
ReactComponent.propTypes = {
   arrayWithShape: React.PropTypes.arrayOf(React.PropTypes.shape({
     color: React.PropTypes.string.isRequired,
     fontSize: React.PropTypes.number.isRequired,
   })).isRequired,
}

Bkz Prop Doğrulama belgelerin bölümü.

GÜNCELLEME

İtibariyle react v15.5, kullanarak React.PropTypesitiraz edildi ve bağımsız paketi prop-typesyerine kullanılmalıdır:

// an array of a particular shape.
import PropTypes from 'prop-types'; // ES6 
var PropTypes = require('prop-types'); // ES5 with npm
ReactComponent.propTypes = {
   arrayWithShape: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string.isRequired,
     fontSize: PropTypes.number.isRequired,
   })).isRequired,
}

— Pierre Criulanscy
kaynak

17

.isRequiredHer özelliğinin kullanımını belirtmeye değer React.PropTypes.shape. Buraya geldim çünkü yanlış kullanarak .isRequired, React.PropTypes.arrayOfiçeride ihtiyacım olmadığını varsaydım . Tam kapsama doğrulaması elde etmek için, bunu doğrudan doğrudan da uyguladım React.PropTypes.shape.

— gfullam

1

Evet, sizden tamamen aynı şeyi yapıyordum, ancak sadece istediğiniz tuşları işaretleme olanağına sahip olmak çok daha güçlü. Açık bu arada benim için her zaman örtük olmaktan daha iyidir.

— Pierre Criulanscy

Bu örnek doğrulamayı benim için doğru şekilde başarısız değil. İf arrayWithShapeise [] (boş bir dizi) Başarısız olmaz. Eğer arrayWithShapebir {} (bir nesne) başarısız etmez. Eğer arrayWithShape bir [{dumb: 'something'}](doğru sahne olmayan bir dizi) başarısız olur. arrayWithShapeBoş bir dizi ise doğrulama başarısız gerekir . Ben sadece sahne olan nesneler ile boş olmayan bir dizi ise geçmek istiyorum colorve fontsize. Neyi kaçırıyorum?

— sdc

50

Evet, kod PropTypes.arrayOfyerine kullanmak PropTypes.arrayzorundasınız, böyle bir şey yapabilirsiniz:

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  annotationRanges: PropTypes.arrayOf(
    PropTypes.shape({
      start: PropTypes.string.isRequired,
      end: PropTypes.number.isRequired
    }).isRequired
  ).isRequired
}

Ayrıca prototipler hakkında daha fazla bilgi için , burada PropTypes ile Typechecking'i ziyaret edin.

— Alireza
kaynak

3

PropTypes.shape nesnesine .isRequired eklemenin nedeni nedir?

— makovkastar

@makovkastar Çünkü onsuz, [undefined]doğrulama geçer

— user123

28

Ve işte ... tam burnumun altında:

Tepki belgelerinden kendileri: https://facebook.github.io/react/docs/reusable-components.html

// An array of a certain type
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

— majorBummer
kaynak

6

Bir ES6 steno içe aktarma var, başvurabilirsiniz. Daha okunabilir ve yazması kolay.

import React, { Component } from 'react';
import { arrayOf, shape, number } from 'prop-types';

class ExampleComponent extends Component {
  static propTypes = {
    annotationRanges: arrayOf(shape({
      start: number,
      end: number,
    })).isRequired,
  }

  static defaultProps = {
     annotationRanges: [],
  }
}

— Moewiz
kaynak

1

Lütfen İyi bir cevabı nasıl yazarım konusunu inceleyin . Yalnızca kod yanıtları, sorudaki sorunu nasıl çözdüklerini açıklamadığı için önerilmez. Bu sorunun zaten ne olduğunu ve bu sorunun sahip olduğu yükseltilmiş cevaplarda nasıl geliştiğini açıklamak için cevabınızı güncellemelisiniz.

— FluffyKitten

1

Belirli bir şekil için aynı prototipleri birden çok kez tanımlayacaksam, bir proptypes dosyasına soyutlamayı seviyorum, böylece nesnenin şekli değişirse, sadece bir yerde kodu değiştirmek zorundayım. Kod tabanının biraz kurumasına yardımcı olur.

Misal:

// Inside my proptypes.js file
import PT from 'prop-types';

export const product = {
  id: PT.number.isRequired,
  title: PT.string.isRequired,
  sku: PT.string.isRequired,
  description: PT.string.isRequired,
};


// Inside my component file
import PT from 'prop-types';
import { product } from './proptypes;


List.propTypes = {
  productList: PT.arrayOf(product)
}

— Yo Wakita
kaynak

1

Bu da boş bir dizi karşı korumak için benim çözüm oldu:

import React, { Component } from 'react';
import { arrayOf, shape, string, number } from 'prop-types';

ReactComponent.propTypes = {
  arrayWithShape: (props, propName, componentName) => {
    const arrayWithShape = props[propName]
    PropTypes.checkPropTypes({ arrayWithShape:
        arrayOf(
          shape({
            color: string.isRequired,
            fontSize: number.isRequired,
          }).isRequired
      ).isRequired
    }, {arrayWithShape}, 'prop', componentName);
    if(arrayWithShape.length < 1){
      return new Error(`${propName} is empty`)
    }
  }
}

— sdc
kaynak