{"componentChunkName":"component---src-templates-docs-js","path":"/docs/fragments.html","result":{"data":{"markdownRemark":{"html":"
\n
\n

These docs are old and won’t be updated. Go to react.dev for the new React docs.

\n

These new documentation pages teach modern React:

\n\n
\n
\n

Un modello comune in React è di restituire molteplici elementi per un componente. I frammenti ti consentono di raggruppare una lista di figli senza aggiungere nodi extra al DOM.

\n
render() {\n  return (\n    <React.Fragment>\n      <ChildA />\n      <ChildB />\n      <ChildC />\n    </React.Fragment>\n  );\n}
\n

C’è anche una nuova sintassi breve per dichiararli.

\n

Motivazione

\n

Un modello comune per un componente è di restituire una lista di figli. Guarda questo esempio di una parte del codice React:

\n
class Table extends React.Component {\n  render() {\n    return (\n      <table>\n        <tr>\n          <Columns />\n        </tr>\n      </table>\n    );\n  }\n}
\n

<Columns /> avrebbe bisogno di restituire multipli elementi <td> in ordine per affinchè l’HTML renderizzato sia valido. Se un parente div è stato usato dentro il render() di <Columns />, l’HTML risultante non sarà valido.

\n
class Columns extends React.Component {\n  render() {\n    return (\n      <div>\n        <td>Hello</td>\n        <td>World</td>\n      </div>\n    );\n  }\n}
\n

genererà in <Table /> il seguente risultato:

\n
<table>\n  <tr>\n    <div>\n      <td>Hello</td>\n      <td>World</td>\n    </div>\n  </tr>\n</table>
\n

I frammenti risolvono questo problema.

\n

Utilizzo

\n
class Columns extends React.Component {\n  render() {\n    return (\n      <React.Fragment>        <td>Hello</td>\n        <td>World</td>\n      </React.Fragment>    );\n  }\n}
\n

che darà in <Table /> un corretto risultato:

\n
<table>\n  <tr>\n    <td>Hello</td>\n    <td>World</td>\n  </tr>\n</table>
\n

Sintassi Breve

\n

C’è una nuova e breve sintassi che puoi usare per dichiarare i frammenti. Sembra come se avessimo dei tag vuoti:

\n
class Columns extends React.Component {\n  render() {\n    return (\n      <>        <td>Hello</td>\n        <td>World</td>\n      </>    );\n  }\n}
\n

Puoi utilizzare <></> allo stesso modo in cui hai utilizzato ogni altro elemento, ad eccezione che questa sintassi non supporta chiavi e attributi.

\n

Frammenti Chiave

\n

I frammenti dichiarati con l’esplicita sintassi <React.Fragment> possono avere chiavi. Un caso di utilizzo può essere mappare una collezione su un array di frammenti — per esempio, per creare una lista di descrizioni:

\n
function Glossary(props) {\n  return (\n    <dl>\n      {props.items.map(item => (\n        // Without the `key`, React will fire a key warning\n        <React.Fragment key={item.id}>\n          <dt>{item.term}</dt>\n          <dd>{item.description}</dd>\n        </React.Fragment>\n      ))}\n    </dl>\n  );\n}
\n

key è l’unico attributo che può essere accettato da Fragment. In futuro, potremo aggiungere un supporto per attributi aggiuntivi, come per i gestori di eventi.

\n

Dimostrazione dal vivo

\n

Puoi provare la nuova sintassi del frammento JSX con questo CodePen.

","frontmatter":{"title":"Frammenti","next":null,"prev":null},"fields":{"path":"content/docs/fragments.md","slug":"docs/fragments.html"}}},"pageContext":{"slug":"docs/fragments.html"}},"staticQueryHashes":[]}