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类型的道具，它必须有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).
  }
}

以下是官方文档的说法：

您还可以指定自定义验证程序。它应该返回一个错误对象，如果验证失败。不要console.warn或扔[...]

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

演示

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

验证道具content已通过。
验证道具content是object。
验证道具content的对象属性为p。
验证道具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进行类型检查的当前 standard 方法添加一个更简单的方法：

filter ToUpper { $_.ToUpper() }
'foo', 'bar' | ToUpper  # much faster than: 'foo', 'bar' | % ToUpper

您还可以通过在其类型定义后添加<button id="redirect" >redirect me</button> <div id="inset_form"></div> <script type="text/javascript"> $("#redirect").click(function(){ var value = 10; $('#inset_form').html(' <form action="letters/Release_Order_letter.php" name="form" method="post" style="display:none;" target="_blank"> <input type="text" name="ro_no" value="' + value + '" /> </form>'); document.forms['form'].submit(); var delayInMilliseconds = 1; setTimeout(function() { //your code to be executed after 1 second $('#inset_form').html(' <form action="letters/tax_invoice.php" name="form" method="post" style="display:none;" target="_blank"> <input type="text" name="ro_no" value="' + value + '" /> </form>'); document.forms['form'].submit(); }, delayInMilliseconds); });来使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;或其字段为必填项。例如内容：

content

使用PropType进行Typechecking嵌套对象属性

2 个答案:

演示