动态设置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

您可以使用计算的属性名称在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'});