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

Question

我有以下我想用流程注释的内容：

type PropType = {
  content: Object
};

export const DialogContent = ({ content }: PropType) => (
  <div>
    <p className={cn('text-head')}>{content.h4}</p>
    <p className={cn('text-bottom')}>
      {content.p}
    </p>
  </div>
);

我知道该怎么做了类型检查，这样content的类型的Object（如上图所示），但我怎么能型检查其属性呢？

已经尝试过：

  type PropType = {
  content: {
    p: string,
    h4: string
  }
};

但是随后流程只是抱怨p而h4从未使用过。

Answer 1

因此，您要发送类型为的道具，该道具object必须具有属性p和h4？

如果没有编写执行此检查的自定义函数，则无法实现。为此，您需要这样声明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（按顺序）：

• 验证道具content已通过。
• 验证道具content是object。
• 验证道具content的对象属性为p。
• 验证道具content的对象属性为h1。
• 验证object属性content.p是否为string。
• 验证object属性content.h1是否为string。

    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>

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

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