Reactで動的小道具の名前を作成するにはどうすればいいですか？

Question

プロペラの名前を動的に作成することはできますか？たとえば、

let dynamicPropName = "someString"; 

<MyComponent dynamicPropName="some value" /> 

内部のMyComponentのthis.props.someStringが存在するようにします。

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

または

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

が、その後スプレッド演算子を使用します：

Answer 1

あなたはES6を使用している場合は、あなたはダイナミックな小道具を定義することができ

<MyComponent {...dynamicProps} /> 

インサイドMyComponentの -

let props = ...this.props; 

ここでpropsにObject.keysを使用すると、すべての動的な小道具の名前を取得できます。

編集： 追加MyComponet`は、それを処理する方法を知っている `提供された例もちろん

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>