Se sai in anticipo che tutte le proprietà che desideri assegnare ad un componente, usare JSX è facile:
var component = <Component foo={x} bar={y} />;
Se non sai quali proprietà desideri impostare, potresti essere tentato di aggiungerle all'oggetto in seguito:
var component = <Component />;
component.props.foo = x; // male
component.props.bar = y; // altrettanto male
Questo è un anti-pattern perché significa che non possiamo aiutarti a verificare i propTypes per tempo. Ciò significa che i tuoi errori di propTypes finiscono per avere uno stack trace indecifrabile.
Le props dovrebbero essere considerate immutabili. Mutare l'oggetto props altrove potrebbe causare conseguenze inattese, quindi a questo punto dovrebbe essere idealmente considerato un oggetto congelato.
Adesso puoi utilizzare una nuova caratteristica di JSX chiamata attributi spread:
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
Le proprietà dell'oggetto che passi al componente sono copiate nelle sue props.
Puoi usarlo più volte o combinarlo con altri attributi. L'ordine in cui sono specificati è rilevante. Attributi successivi ridefiniscono quelli precedentemente impostati.
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
...
? #L'operatore ...
(o operatore spread) è già supportato per gli array in ES6. Esiste anche una proposta per ES7 per le proprietà Spread e Rest di Object. Stiamo prendendo spunto da questi standard supportati o in corso di sviluppo per fornire una sintassi più pulita a JSX.