如何验证ReactJS中嵌套对象的PropTypes？

Question

我正在使用数据对象作为ReactJS中组件的道具.

<Field data={data} />

我知道很容易验证PropTypes对象本身:

propTypes: {
  data: React.PropTypes.object
}

但是如果我想验证里面的值呢？即.data.id,data.title？

props[propName]: React.PropTypes.number.required // etc...

Answer 1

您可以使用它React.PropTypes.shape来验证属性:

propTypes: {
    data: React.PropTypes.shape({
      id: React.PropTypes.number.isRequired,
      title: React.PropTypes.string
    })
}

更新

正如@Chris在评论中指出的那样,从React版本15.5.0 React.PropTypes开始转移到包prop-types.

import PropTypes from 'prop-types';    

propTypes: {
    data: PropTypes.shape({
      id: PropTypes.number.isRequired,
      title: PropTypes.string
    })
}

更多信息

Answer 2

如果React.PropTypes.shape没有给你你想要的类型检查级别,看看tcomb-react.

它提供了一个toPropTypes()功能,它可以让你验证与所定义的模式tcomb通过利用阵营的支持,用于定义库的自定义propTypes验证,使用运行验证tcomb验证.

其文档的基本示例:

// define the component props
var MyProps = struct({
  foo: Num,
  bar: subtype(Str, function (s) { return s.length <= 3; }, 'Bar')
});

// a simple component
var MyComponent = React.createClass({

  propTypes: toPropTypes(MyProps), // <--- !

  render: function () {
    return (
      <div>
        <div>Foo is: {this.props.foo}</div>
        <div>Bar is: {this.props.bar}</div>
      </div>
    );
  }    
});

Answer 3

需要注意的是，嵌套的深度超出了一层。这在验证 URL 参数时对我很有用：

propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string.isRequired
    })
  })
};