是否可以动态创建道具名称?例如:
let dynamicPropName = "someString"; <MyComponent dynamicPropName="some value" />
因此在MyComponent内部,this.props.someString存在。
如果使用 es6 ,则可以定义动态prop:
let dynamicProps = {"dynamicKey":"someString", "dynamicKey2":"someString"};
要么
let someVariable = "xyz"; dynamicProps[someVariable] = value;
然后使用传播运算符:
<MyComponent {...dynamicProps} />
在MyComponent内部-
let props = {...this.props};
现在,您可以使用Object.keyson props获取所有动态道具名称。
Object.keys
props
编辑: 添加了一个示例
class Test extends React.Component { renderFromProps() { return Object.keys(this.props) .map((propKey) => <h3>{this.props[propKey]}</h3> ); } render() { return ( <div> <h1>One way </h1> <hr/> <h3>{this.props.name}</h3> <h3>{this.props.type}</h3> <h3>{this.props.value}</h3> <hr/> <h1> Another way </h1> <hr/> { this.renderFromProps()} </div> ); } } const dynamicProps = { name:"Test", type:"String", value:"Hi" }; ReactDOM.render( <Test {...dynamicProps} />, document.getElementById('root') ); <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="root"> </div>