如何在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>