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

More info

Answer 2

如果React.PropTypes.shape没有为您提供所需的类型检查级别，请查看tcomb-react。

它提供了toPropTypes()功能，通过使用React对定义tcomb的支持，使用custom propTypes validators运行验证，您可以验证使用tcomb-validation库定义的模式。

Basic example from its docs：

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

Answer 4

user: React.PropTypes.shap({
    age: (props, propName) => {
       if (!props[propName] > 0 && props[propName] > 100) {
          return new Error(`${propName} must be betwen 1 and 99`)
       }
       return null
    },
})

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

4 个答案: