You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
2.1 KiB
53 lines
2.1 KiB
9 years ago
|
---
|
||
|
|
id: jsx-spread-it-IT
|
||
|
|
title: Attributi Spread JSX
|
||
|
|
permalink: jsx-spread-it-IT.html
|
||
|
|
prev: jsx-in-depth-it-IT.html
|
||
|
|
next: jsx-gotchas-it-IT.html
|
||
|
|
---
|
||
|
|
|
||
|
|
Se sai in anticipo che tutte le proprietà che desideri assegnare ad un componente, usare JSX è facile:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
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:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
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:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
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.
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). Esiste anche una proposta per ES7 per le proprietà [Spread e Rest di Object](https://github.com/sebmarkbage/ecmascript-rest-spread). Stiamo prendendo spunto da questi standard supportati o in corso di sviluppo per fornire una sintassi più pulita a JSX.
|