セットプロップキーを動的にJSX

Question

それは（私が何をしようとしているの単なる一例、このコードは動作しません）JSXで次の操作を行うことが可能です場合、私は思ったんだけど：私は「

const propKey = 'someProp'; 
const jsx = <MyComponent [propKey]="some value" />; 
// evaluates to <MyComponent someProp="some value"> 

バベルのes2015段階-1を使用して、私はこのような辞書に広がる可能性がありメートル：

const extraProps = {[propKey]: 'some value'}; 
const jsx = <MyComponent {...extraProps} /> 

をそれはちょうど1小道具のためにあまりにも不格好と思われます。私はReact.createElementを使うつもりはありません。私のクラスはすべてes6クラスです。ありがとう！

Answer 1

あなたはJSXでcomputed property namesを使用してオブジェクトを作成し、それを広めることができます。

const propKey = 'someProp'; 
const jsx = <MyComponent { ...{ [propKey]: "some value" } } />; 

Answer 2

JSXはReact.createElementを呼び出すための構文糖です。したがって、1つの解決策は、React.createElementに直接電話することです。

const element = React.createElement(MyComponent, {[propKey]: 'some value'});