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

Um padrão comum no React é que um componente pode retornar múltiplos elementos. Os Fragmentos permitem agrupar uma lista de filhos sem adicionar nós extras ao DOM.

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

Há também uma nova sintaxe curta para declará-las.

\n

Motivação

\n

Um padrão comum é para um componente retornar uma lista de filhos. Considerando o código React a seguir:

\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 /> precisaria retornar múltiplos elementos <td> para que o HTML renderizado fosse válido. Se um div pai for usado dentro do render() de <Columns />, então o HTML resultante será inválido.

\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

Resulta na seguinte <Table />:

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

Os Fragmentos resolvem este problema.

\n

Uso

\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

que resulta em uma <Table /> correta:

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

Sintaxe curta

\n

Existe uma sintaxe nova e mais curta que você pode usar para declarar fragmentos. Parecem tags vazias:

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

Você pode usar <></> da mesma forma que você usaria qualquer outro elemento, exceto que ele não suporta chaves ou atributos.

\n

Fragmentos com chaves

\n

Fragmentos declarados com <React.Fragment> podem ter chaves. Um caso de uso para isso é mapear uma coleção para um array de fragmentos - por exemplo, para criar uma lista de descrição:

\n
function Glossary(props) {\n  return (\n    <dl>\n      {props.items.map(item => (\n        // Sem a `key`, React irá disparar um aviso\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 é o único atributo que pode ser passado para o Fragment. No futuro, podemos adicionar suporte para outros atributos, como manipuladores de eventos.

\n

Demonstração ao vivo

\n

Você pode experimentar a nova sintaxe de fragmento JSX com este CodePen.

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