properties - 确保数组属性的每个元素都符合 React 中的自定义形状

Question

我想确保数组属性的每个元素都符合特定的形状。

这与 React proptype array with shape 中回答的问题不同。他们测试了每个元素是否与给定的预定义 React proptype 验证器匹配，在这种情况下为 React.propTypes.number。 我有兴趣针对自定义对象形状进行测试。

例如:

class MyClass extends React.Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    data: React.PropTypes.arrayOf({
      name: React.PropTypes.string,
      year: React.PropTypes.number,
    })
  }
}

这会触发警告:失败的propType:typeChecker不是函数检查渲染方法

Answer 1

你已经很接近了，但是你需要指定数组的 proptype 类型，并且 React.PropTypes.shape 让你可以指定一个带有键及其类型的对象。

static propTypes = {
  data: React.PropTypes.arrayOf(
    React.PropTypes.shape({
      name: React.PropTypes.string,
      year: React.PropTypes.number,
    })
  )
}

提示:从 'react' 导入 React, { PropTypes }，这样您就可以只使用 PropTypes。