使用PropType进行Typechecking嵌套对象属性 [英] Typechecking nested object properties with PropType

问题描述

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

I have following that i want to annotate with 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>
);

我知道如何进行类型检查以便内容的类型为 Object （如上所示），但我如何键入 - 检查其属性？

I know how to do the type-check to so that content is of type Object (as shown above), but how can I type-check its properties as well?

已经尝试过：

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

但是流程只是抱怨 p 和 h4 永远不会被使用。

But then flow just complains that p and h4 is never used.

推荐答案

所以你想发送一个支持类型 object ，必须具有属性 p 和 h4 ？

So you want to send in an prop that is of type object, which has to have the properties p and h4?

如果没有编写执行此检查的自定义函数，则无法做到这一点。为此，您将声明 propTypes ，如下所示：

This isn't possible without writing a custom function that does this checking. To do this you would declare your propTypes like so:

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).
  }
}

以下是官方文档的说法：

Here's what the official docs say:

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

阅读更多关于 官方文档的PropTypes的类型检查。

Read more about typechecking with PropTypes on the Official Documentation.

这是一个演示我准备了。对于您正在寻找的内容，它可能会或可能不会过度，因为验证非常广泛。你可以挑选你需要的那些。您的内容的以下验证是（按顺序）：

Here's a demo I prepared. It may or may not be overkill for what you're looking for, since the validation is quite extensive. You may cherry-pick the ones you need. The validations below for your content are (in order):

• 验证支柱内容已通过。


• 验证道具内容是 object 。


• 验证道具内容的对象属性为 p 。


• 验证道具内容的对象属性为 h1 。


• 验证对象属性 content.p 是字符串。


• 验证对象属性 content.h1 是字符串。

• Verify the prop content is passed.
• Verify the prop content is an object.
• Verify the prop content has an object property of p.
• Verify the prop content has an object property of h1.
• Verify the object property content.p is a string.
• Verify the object property content.h1 is a 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>

您也可以在此 <上进行测试强>小提琴 并做一些嘲弄。尝试更改传递给组件的值，类型和对象属性，并读取控制台输出。

You may also test it on this Fiddle and do some mocking. Try changing the values, types and object properties passed into the component and read the console output.

希望这会有所帮助。祝你好运！

Hope this helps. Good luck!

这篇关于使用PropType进行Typechecking嵌套对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！