有形状反应型列阵

Question

是否有一种内置的方法来使用proptypes来确保传递给组件的对象数组实际上是特定形状的对象数组？

也许是这样的？

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

我是不是漏了什么特别明显的东西？看来这会很受欢迎。

Answer 1

就在这里...就在我眼皮底下：

来自react文档本身：https://facebook.github.io/react/docs/reusable-components.html

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

Answer 2

是的，您需要使用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

Answer 3

您可以使用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,
}

请参阅文档中的“适当验证”部分。

更新

从React.PropTypes开始，不推荐使用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,
}