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

Posted 2023-02-21

【中文标题】如何在 ReactJS 中验证嵌套对象的 PropTypes？

【英文标题】：How do you validate the PropTypes of a nested object in ReactJS?

【发布时间】：2015-01-11 10:25:22

【问题描述】：

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

<Field data=data />

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

propTypes: 
  data: React.PropTypes.object

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

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

【参考方案1】：

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

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

更新

正如@Chris 在 cmets 中指出的那样，从 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

【讨论】：

精确答案@nilgun。你可以找到 React 的 propTypes 的文档：facebook.github.io/react/docs/reusable-components.html

React.PropTypes 现在已弃用。请改用prop-types 包中的PropTypes。 More here

【参考方案2】：

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

它提供了一个 toPropTypes() 函数，通过使用 React 对定义 custom propTypes validators 的支持，您可以验证使用 tcomb 库定义的架构，使用 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>
    );
      
);

【参考方案3】：

想指出嵌套的工作深度超出了一层。这在验证 URL 参数时对我很有用：

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

【讨论】：

这是否意味着 id 仅在存在 match.params 对象或 isRequired 级联时才需要，这意味着 match isRequired 与 params 对象与 id支柱？即，如果没有提供参数，它仍然有效吗？

这可以读作“match需要有params和params需要有id”。

嗨@datchung 实际上我已经发现（并测试了）它是如何读取的，如果match 存在并且如果match 包含params 那么它是必需的params 包含一个字符串id.

【参考方案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
    ,
)

【讨论】：

这个答案显然已经付出了很多努力，如果它只是代码，可能很难掌握。通常用几句话来评论解决方案。请编辑您的答案并添加一些解释。