arrays - 用形状 react proptype 数组

Question

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

也许是这样的？

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

我在这里错过了一些非常明显的东西吗？看来这会很受追捧。

Answer 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文档部分。

更新

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