反应带形状的proptype数组

有没有内置的方式来使用proptypes，以确保传递给组件的对象数组实际上是一个特定形状的对象数组？

也许这样？

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

我在这里错过了超级明显的东西吗？ 似乎这将是高度追捧。

Answer 1

您可以使用React.PropTypes.shape()作为React.PropTypes.shape()的参数：

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

请参阅文档的“ Propvalidation”部分。

UPDATE

从react v15.5 ，不推荐使用react v15.5 ，而应该使用独立的包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, } 

Answer 2

就在我的鼻子下面

从反应文件本身： https ： //facebook.github.io/react/docs/reusable-components.html

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

Answer 3

有一个ES6速记导入，你可以参考。 更易读，易于input。

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

Answer 4

是的，你需要在代码中使用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