設置支撐鍵動態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} /> 

但似乎只是一個道具太笨重。我不想使用React.createElement;我所有的課程都是es6課程。謝謝！

Answer 1

您可以在JSX創建使用computed property names一個對象，並傳播它：

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

Answer 2

JSX是調用React.createElement語法糖。因此，一種解決方案是直接撥打React.createElement：

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