React Fragments

Responsive image

O React a cada nova atualização nos traz novos recursos, hoje iremos falar sobre fragmentos.

Mas o que são, esses fragments? Segundo a documentação oficial do react.

Um padrão comum no React é para um componente retornar vários elementos. Os fragmentos permitem agrupar uma lista de filhos sem adicionar nós extras ao DOM.

Um ta mas e ai ? vamos a um exemplo.

Se você tem uma lista, que precisa retornar seria da seguinte forma.

class Itens extends React.Component
{
    render(){

        return(
        <div>
        <li>item </li>
        <li>item </li>
        <li>item </li>
        <div>
        )
    }

}

export Itens

saida:

Captura de Tela 2018-03-31 às 10.05.55.png

Dessa forma teria que usar uma div para agrupar os itens, uma outra forma é devolver um array de objetos.

Isso na versão 15 do react.

class Itens extends React.Component
{
    render(){

        return(
        [
        <li>item </li>,
        <li>item </li>,
        <li>item </li>,
        ]
        )
    }

}

export Itens

saida:

Captura de Tela 2018-03-31 às 10.07.38.png uma forma efetiva, porem pode ter alertas por falta da key nos itens, lembrando que sempre que usar um array é necessário ter a key única nos elementos.

Já usando a verão 16.3, usada no presente artigo, podemos usar o Fragment.

 import React, { Component } from 'react'

export default class Itens extends Component {
  render() {
    return (
        <React.Fragment>
         <li>item </li>
        <li>item </li>
        <li>item </li>
        </React.Fragment>
    )
  }
}

saida:

Captura de Tela 2018-03-31 às 10.13.52.png

não se sabe se o recurso de retornar arrays será retirado, mas fica ai a dica dos Fragments :) .