如何验证ReactJS中嵌套对象的属性类型？

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

<Field data={data} />

但是如果我想验证里面的值呢？比如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
    })
}

更新

正如@Chris在评论中指出的，从React版本15.5.0开始，React.PropTypes已经移动到package

PropTypes

import PropTypes from 'prop-types';    

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

---

如果

React.PropTypes.shape

没有提供所需的类型检查级别，请查看

它提供了一个函数，通过使用React对定义、运行验证的支持，您可以验证使用库定义的模式

:

//定义组件道具
var MyProps=struct({
福：嗯，
bar:subtype（Str，函数）{return s.length想要注意嵌套的工作深度超过一级。这在验证URL参数时对我很有用：

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

精确答案@nilgun。您可以找到React的propTypes的文档：
React。propTypes
现在已被弃用。请改用
propTypes
包中的
propTypes
。显然，在这个答案上花了很多精力，因此可能很难理解它是否只是代码。通常会对解决方案进行注释用几句话继续。请编辑您的答案并添加一些解释。这是否意味着只有当存在
匹配.params
对象时才需要
id
，还是
isRequired
级联，意思是
匹配
params
对象和
id
属性？即，如果没有提供参数d它仍然有效吗？这可以理解为“
match
需要有
params
和
params
需要有
id
”。Hi@datchung实际上我已经发现（并测试过）它是如何读取的，如果存在
match
，并且
match
包含
params
，则需要
params
包含字符串
id
。
// 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>
    );
  }    
});

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

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