您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

使用PropType对嵌套对象属性进行类型检查

使用PropType对嵌套对象属性进行类型检查

因此,您要发送类型为的道具,该道具object必须具有属性ph4

如果没有编写执行此检查的自定义函数,则无法实现。为此,您需要这样声明propTypes

propTypes: {
  content: function(props, propName, componentName) {
    //do your validation here. 
    //Return an Error if something's wrong, otherwise don't return anything (or return null).
  }
}

这是官方文档所说的:

您还可以指定一个自定义验证器。如果验证失败,它将返回一个Error对象。不要console.warn或抛出[…]

阅读有关使用PropTypes进行类型检查的更多信息。

这是我准备的演示。由于验证的范围很广,因此它对于您正在寻找的内容可能会或可能不会过大。您可以选择需要的东西。以下针对您的验证为content(按顺序):

    var DialogContent = React.createClass({

      propTypes: {

        content: function(props, propName, componentName) {

          if (!props.content) {

            return new Error(

              'required prop `' + propName + '` was not specified in `' + componentName + '`.'

            );

          } else if (typeof props.content !== 'object') {

            return new Error(

              'Invalid prop `' + propName + '` of type `' + typeof props.content + '` supplied to `' + componentName + '`, expected `object`.'

            );

          } else if (!props.content.p) {

            return new Error(

              'required prop `p` of object `' + propName + '` was not specified in `' + componentName + '`.'

            );

          } else if (!props.content.h1) {

            return new Error(

              'required prop `h1` of object `' + propName + '` was not specified in `' + componentName + '`.'

            );

          } else if (typeof props.content.p !== 'string') {

            return new Error(

              'Invalid object property `p` of prop `' + propName + '` of type `' + typeof props.content.p + '` supplied to `' + componentName + '`, expected `string`.'

            );

          } else if (typeof props.content.h1 !== 'string') {

            return new Error(

              'Invalid object property `h1` of prop `' + propName + '` of type `' + typeof props.content.h1 + '` supplied to `' + componentName + '`, expected `string`.'

            );

          }

        }

      },



      render: function() {

        return <div>My DialogContent Component</div>;

      }

    });



    var obj = {

      p: "foo",

      h1: "bar"

    };



    ReactDOM.render(<DialogContent content={obj} />,

      document.getElementById('container')

    );


    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>



    <div id="container"></div>

您也可以在此 上对其进行测试并进行一些模拟。尝试更改传递到组件中的值,类型和对象属性,然后读取控制台输出

希望这可以帮助。祝好运!

其他 2022/1/1 18:15:21 有441人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶