javascript - 使用 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
  }
};

但是 flow 只是提示 p 和 h4 从未被使用过。

Answer 1

所以你想发送一个类型为 object 的 Prop ，它必须具有属性 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).
  }
}

官方文档是这样说的:

You can also specify a custom validator. It should return an Error object if the validation fails. Don't console.warn or throw [...]

在 Official Documentation 上阅读有关使用 PropTypes 进行类型检查的更多信息.

---

演示

这是我准备的演示。由于验证非常广泛，因此对于您正在寻找的东西可能会或可能不会过度杀伤力。你可以挑选你需要的。以下对您的内容的验证是(按顺序):

• 验证 Prop content 是否通过。
• 验证 Prop content 是一个 object。
• 验证 Prop content 的对象属性为 p。
• 验证 Prop content 的对象属性为 h1。
• 验证对象属性 content.p 是一个 string。
• 验证对象属性 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 上测试它并做一些 mock 。尝试更改传递到组件中的值、类型和对象属性并读取控制台输出。

希望这对您有所帮助。祝你好运!