React proptype массив с формой

Есть ли встроенный способ использования proptypes, чтобы гарантировать, что массив объектов, передаваемых компоненту, на самом деле представляет собой массив объектов определенной формы?

Может быть, что-то вроде этого?

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

Я пропустил что-то сверх очевидное здесь? Похоже, это было бы очень востребовано.

Ответ 1

Вы можете использовать React.PropTypes.shape() в качестве аргумента для 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,
}

Обратитесь к разделу Prop Validation документации.

UPDATE

В соответствии с react v15.5 использование React.PropTypes устарело, и вместо него следует использовать автономный пакет prop-types:

// 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,
}

Ответ 2

И вот он... прямо под моим носом:

Из самих реакционных документов: https://facebook.github.io/react/docs/reusable-components.html

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

Ответ 3

Да, вам нужно использовать PropTypes.arrayOf вместо PropTypes.array в коде, вы можете сделать что-то вроде этого:

import PropTypes from 'prop-types';

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

Также для получения более подробной информации о proptypes посетите Typechecking With PropTypes здесь

Ответ 4

Там сокращенный импорт ES6, вы можете ссылаться. Более читаемый и простой в использовании.

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: [],
  }
}

Ответ 5

Если я должен несколько раз указывать одни и те же proptypes для определенной формы, мне нравится абстрагировать ее до файла proptypes, так что если форма объекта изменяется, мне нужно только изменить код в одном месте. Это помогает немного высушить кодовую базу.

Пример:

// 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)
}