Set Prop Key Динамически 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'});