使用PropType检查嵌套对象属性

Question

我想用flow注释以下内容：

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>
);

我知道如何对进行类型检查，以使内容的类型为对象（如上所示），但如何对其属性进行类型检查？

已经尝试过这个：

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

但是flow只是抱怨从未使用过p和h4。

Answer 1

我知道这个问题和答案非常古老，但我认为我们应该添加当前使用道具类型进行类型检查的标准方法，这更简单：

import PropTypes from 'prop-types';

class DialogContent extends React.Component {

  static propTypes = {
    content: PropTypes.shape({ p: PropTypes.string, h4: PropTypes.string })
  };

  render() {
    const { p, h4 } = this.props.content;

    return (
      <div>
        <p className='text-head'>{h4}</p>
        <p className='text-bottom'>
          {p}
        </p>
      </div>
    )
  }
}

export default DialogContent;

您还可以通过在其类型定义后添加isRequired来设置内容或其必填字段。例如，对于内容：

static propTypes = {
    content: PropTypes.shape({ p: PropTypes.string, h4: PropTypes.string }).isRequired
};

Answer 2

因此，您希望发送类型为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).
  }
}

官方文件是这样说的：

您还可以指定自定义验证器。如果验证失败，它应该返回一个错误对象。不要控制台。警告或抛出[…]

阅读有关在官方文档中使用PropType进行打字检查的更多信息。

这是我准备的演示。对于你正在寻找的东西来说，这可能是也可能不是过分的，因为验证是相当广泛的。你可以挑你需要的。以下是您的内容的验证（按顺序）：

• 验证道具内容是否通过
• 验证道具内容是否为对象
• 验证道具内容的对象属性是否为p
• 验证道具内容的对象属性为h1
• 验证对象属性内容。p是一个字符串
• 验证对象属性内容。h1是一个字符串

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>