设置支撑键动态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'});