Set Prop Key Dynamisch JSX

Question

Ich frage mich, ob es möglich ist folgend in JSX zu tun (dieser Code nicht funktioniert, nur ein Beispiel dafür, was ich versuche zu tun):

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

I‘ m unter Verwendung von babel es2015 Stufe-1, so konnte ich ein Wörterbuch wie folgt verteilt:

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

aber das scheint zu klobig für nur eine Stütze. Ich möchte React.createElement nicht verwenden. Alle meine Klassen sind es6 Klassen. Vielen Dank!

Answer 1

Sie können in der JSX erstellen ein Objekt der computed property names verwenden und verteilen es:

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

Answer 2

JSX syntaktischer Zucker ist React.createElement für den Aufruf. So eine Lösung ist React.createElement direkt zu rufen:

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