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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (20)

我使用数据对象作为我的ReactJS组件的道具。

<Field data={data} />

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

propTypes: {
  data: React.PropTypes.object
}

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

props[propName]: React.PropTypes.number.required // etc...
提问于
用户回答回答于

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

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

用户回答回答于

如果React.PropTypes.shape不能提供你想要的类型检查级别,那么看看tcomb-react.

它提供了一个toPropTypes()函数,通过使用React对定义自定义propTypes验证器的支持来验证使用tcomb库定义的模式,并使用tcomb-validation运行验证。

示例

// 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>
    );
  }    
});

扫码关注云+社区