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

Z时代
2024-01-10
分类：问答

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

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从未使用过。

回答：

因此，您要发送类型为的道具，该道具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>