我有以下内容，我想用流程注释：
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从未使用过。
所以你想发送一个类型为 的propsobject，它必须具有属性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 进行类型检查的信息。
这是我准备的演示。对于您正在寻找的内容，它可能会也可能不会过度，因为验证非常广泛。你可以挑选你需要的那些。您的以下验证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上测试它并做一些模拟。尝试更改传递给组件的值、类型和对象属性并读取控制台输出。
希望这可以帮助。祝你好运！
我知道这个问题和答案已经很老了，但作为参考，我认为我们应该添加使用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;
您还可以content通过isRequired在其类型定义之后添加来使其或其字段成为必需的。例如对于内容：
static propTypes = {
content: PropTypes.shape({ p: PropTypes.string, h4: PropTypes.string }).isRequired
};