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

3 回答

• 288

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

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

  Update

  正如@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

  回复于 2024-04-26T08:59:15+08:00
• 13

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

  它提供了一个toPropTypes()函数，它允许您通过使用React支持定义custom propTypes validators，使用tcomb-validation运行验证来验证使用tcomb库定义的模式 .

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

  回复于 2024-04-26T08:59:15+08:00
• -6

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

  回复于 2024-04-26T08:59:15+08:00