我有以下我想用流程注释的内容:
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(如上图所示),但我怎么能型检查其属性呢?
content
Object
已经尝试过:
type PropType = { content: { p: string, h4: string } };
但是随后流程只是抱怨p而h4从未使用过。
p
h4
因此,您要发送类型为的道具,该道具object必须具有属性p和h4?
object
如果没有编写执行此检查的自定义函数,则无法实现。为此,您需要这样声明propTypes:
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或抛出[…]
console.warn
在 官方文档中 阅读有关使用PropTypes进行类型检查的更多信息。
这是我准备的演示。由于验证的范围很广,因此它对于您正在寻找的内容可能会或可能不会过大。您可以选择需要的东西。以下针对您的验证为content(按顺序):
h1
content.p
string
content.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>
您也可以在此 Fiddle 上对其进行测试并进行一些模拟。尝试更改传递到组件中的值,类型和对象属性,然后读取控制台输出。
希望这可以帮助。祝好运!