如何在React中创建动态的道具名称？

Question

是否可以动态创建道具的名称？例如：

let dynamicPropName = "someString"; 

<MyComponent dynamicPropName="some value" /> 

这样在MyComponent中就存在this.props.someString。

Answer 1

如果您正在使用ES6，您可以定义动态道具：

let dynamicProps = {"dynamicKey":"someString", "dynamicKey2":"someString"}; 

或

let someVariable = "xyz"; 
dynamicProps[someVariable] = value; 

然后使用蔓延运营商：

<MyComponent {...dynamicProps} /> 

内MyComponent的 -

let props = ...this.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>