我正在使用组合模式进行反应。例如,我有这个简单的组件:
class Simple extends React.Component {
render() {
return <div>{this.props.text}</div>;
}
}
Simple.propTypes = {
text: React.PropTypes.string.isRequired
};
现在,我有了这个增强的组件:
class Enhanced extends React.Component {
render() {
return (
<div>
<div>Hi, I'm the enhanced version</div>
<Simple {...this.props} />
</div>
);
}
}
现在,我如何指定增强组件的 proptypes?我可以这样做:
Enhanced.propTypes = {
text: React.PropTypes.string.isRequired
};
但这不好,因为我必须列出所有的道具Simple
组件,每当我更改这些道具时,我都必须更改它们Enhanced
propTypes
只是普通的 JS 对象。您可以随心所欲地编写它们:
// Simple.js
export const simplePropTypes = {
text: React.PropTypes.string.isRequired
}
Simple.propTypes = simplePropTypes
// Enhanced.js
import Simple, { simplePropTypes } from './Simple'
Enhanced.propTypes = {
somethingElse: React.PropTypes.number,
...simplePropTypes
}
update:
You should能够使用组件定义的propTypes
直接地。
Enhanced.propTypes = {
somethingElse: React.PropTypes.number,
...Simple.propTypes
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)