使用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类型为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).
  }
}

这是官方文档所说的：

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

在官方文档中阅读有关使用PropTypes进行类型检查的更多信息。

---

演示

这是我准备的演示。 由于验证的范围很广，因此对于您正在寻找的内容而言，它可能是矫kill过正，也可能不是过高。 您可以选择需要的东西。 以下针对您的content的验证是（按顺序）：

• 验证道具content是否通过。
• 验证道具content是否为object 。
• 验证道具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上对其进行测试并进行一些模拟。 尝试更改传递到组件中的值，类型和对象属性，然后读取控制台输出。

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

Answer 2

我知道这个问题和答案已经很老了，但是作为参考，我认为我们应该为使用prop-types进行类型检查的当前标准方法添加更简单的方法：

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来使content或其字段成为必需项。 例如内容：

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