动态设置Prop键JSX

Question

我想知道是否可以在JSX中执行以下操作（此代码不起作用，只是我尝试做的一个示例）：

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

我使用了babel es2015 stage-1，所以我可以像这样传播一个字典：

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

但对于一个道具来说，这似乎太笨重了。我不打算使用React.createElement;我所有的课程都是es6课程。谢谢！

Answer 1

您可以使用computed property names在JSX中创建一个对象，然后传播它：

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

Answer 2

JSX是用于调用React.createElement的语法糖。因此，一种解决方案是直接调用React.createElement：

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