react.dev/docs/02.2-jsx-spread.it-IT.md

id	title	permalink	prev	next
jsx-spread-it-IT	Attributi Spread JSX	jsx-spread-it-IT.html	jsx-in-depth-it-IT.html	jsx-gotchas-it-IT.html

Se sai in anticipo che tutte le proprietà che desideri assegnare ad un componente, usare JSX è facile:

  var component = <Component foo={x} bar={y} />;

Le Props Mutevoli sono il Male

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.

Attributi Spread

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'

Cos'è la strana notazione ...?

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.