O React 16.2 agora está disponível! O maior complemento, é a melhoria ao suporte do retorno a múltiplos filhos de um método de renderização de um componente. Nós chamamos esta funcionaliade de fragmentos:
\nFragmentos se parecem com tags JSX vazias. Elas permitem você agrupar uma lista de filhos sem adicionar nós extras ao DOM:
\nrender() {\n return (\n <>\n <ChildA />\n <ChildB />\n <ChildC />\n </>\n );\n}Esta empolgante funcionalidade é possível graças a junção do React e do JSX.
\nUm padrão comum é um componente retornar uma lista de filhos. Observe este exmplo em HTML:
\nAlgum texto.\n<h2>Um cabeçalho</h2>\nMais texto.\n<h2>Outro cabeçalho</h2>\nAinda mais texto.Antes da versão 16, a única forma de realizar isto no React, seria encapsulando os filhos em um elemento extra, geralmente uma div ou span:
render() {\n return (\n // Elemento div inconveniente :(\n <div>\n Algum texto.\n <h2>Um cabeçalho</h2>\n Mais texto.\n <h2>Outro cabeçalho</h2>\n Ainda mais texto.\n </div>\n );\n}Para resolver esta limitação, no React 16.0, foi adicionado suporte ao retorno de um array de elementos de um método render de um componente. Ao invés de encapsular os filhos em um elemento DOM, você pode coloca-los dentro de um array:
render() {\n return [\n \"Algum texto.\",\n <h2 key=\"heading-1\">Um cabeçalho</h2>,\n \"Mais texto.\",\n <h2 key=\"heading-2\">Outro cabeçalho</h2>,\n \"Ainda mais texto.\"\n ];\n}No entando, isso tem algumas diferenças confusas do JSX normal:
\nPara providenciar uma maior consistência de exepriência a fragmentos, o React agora fornece um componente Fragment de primeira classe, que pode ser usado em lugar dos arrays.
render() {\n return (\n <Fragment> Algum texto.\n <h2>Um cabeçalho</h2>\n Mais texto.\n <h2>Outro cabeçalho</h2>\n Ainda mais texto.\n </Fragment> );\n}Você pode usar <Fragment /> da mesma forma que usaria qualquer outro elemento, sem mudar a forma que você escreve JSX. Sem víngulas, sem chaves e sem aspas.
O componente Fragment está disponível no objeto principal React:
\nconst Fragment = React.Fragment;\n\n<Fragment>\n <ChildA />\n <ChildB />\n <ChildC />\n</Fragment>\n\n// Isto também funciona\n<React.Fragment>\n <ChildA />\n <ChildB />\n <ChildC />\n</React.Fragment>Fragments são padrões comuns em nossa base de código no Facebook. Nós antecipamos que eles serão amplamente adotados por outros times. Para tornar a experiência de criação o mais conveniente possível, nós estamos adicionando o suporte sintático aos fragmentos no JSX:
\nrender() {\n return (\n <> Algum texto.\n <h2>Um cabeçalho</h2>\n Mais texto.\n <h2>Outro cabeçalho</h2>\n Ainda mais texto.\n </> );\n}No React, esta transformação do elemento <React.Fragment/>, como no exemplo da seção anterior. (Frameworks não React que usam JSX talvez compile de forma diferente.)
A sintaxe do Fragmento no JSX foi inspirada pela arte anterior, como o construtor XMLList() <></> no E4X. Usando um par de tags vazias, representa-se a ideia de que não será adicionado um elemento real ao DOM.
Observe que a sintaxe <></> não aceita atributos, incluindo chaves (key).
Se você precisa de um fragmento com chave, você pode usar o <Fragment /> diretamente. Um caso de uso seria mapear uma coleção para um array de fragmentos — por exemplo, para criar uma lista de descrição:
function Glossary(props) {\n return (\n <dl>\n {props.items.map(item => (\n // Sem a `key`, o React irá exibir um alerta sobre a key\n <Fragment key={item.id}>\n <dt>{item.term}</dt>\n <dd>{item.description}</dd>\n </Fragment>\n ))}\n </dl>\n );\n}key é o único atributo qual pode ser passado ao Fragment. No futuro, nós provavelmente adicionaremos suporte aos de mais atributos, tais como os manipuladores de eventos.
Você pode experimentar a sintaxe fragment JSX com este CodePen.
\nO suporte à sintaxe de fragmento no JSX irá variar dependendo das ferramentas quais você utiliza para construir o seu app. Por favor, seja paciente enquanto a comunidade JSX trabalha para adotar a nova sintaxe. Nós temos trabalhado próximo dos responsáveis dos projetos mais populares:
\nO suporte experimental à sintaxe de fragment será adicionado ao Create React App dentro de poucos dias. Uma versão estável talvez leve mais tempo, enquanto esperamos a adoção por projetos principiantes.
\nO suporte ao fragmento JSX encontra-se disponível no Babel v7.0.0-beta.31 e versões superiores! Se você já utiliza o Babel 7, apenas atualize para a última versão do Babel e do plugin transform:
\n# para usuários que utilizam yarn\nyarn upgrade @babel/core @babel/plugin-transform-react-jsx\n# para usuários que utilizam npm\nnpm update @babel/core @babel/plugin-transform-react-jsxOu se você está usando o react preset:
\n# para usuários que utilizam yarn\nyarn upgrade @babel/core @babel/preset-react\n# para usuários que utilizam npm\nnpm update @babel/core @babel/preset-reactObserve que o Babel 7 ainda se encontra na versão beta, a versão estável chegará em breve.
\nInfelizmente o suporte ao Babel 6.x não está disponível, e não há atualmente planos para faze-lo retrocompatível.
\nSe você está utilizando o Babel com Webpack, não é necessário nenhuma etapa adicional, porque o babel-loader utilizará sua versão internamente já instalada do Babel.
\nSe você utiliza JSX com um framework não baseado em React, como Inferno ou Preact, há uma opção de diretiva no babel-plugin-transform-react-jsx, que configura o compilador do Babel para alterar a sintaxe <></> para um identificador personalizado.
O TypeScript possui total suporte à sintaxe de fragmento! Por favor, atualize para a versão 2.6.2. (Note que é imporante mesmo se você já está na versão 2.6.1, sendo que o suporte foi adicionado como atualização de complemento na versão 2.6.2.)
\nAtualize para a última versão do TypeScript utilizando este comando:
\n# para usuários que utilizam yarn\nyarn upgrade typescript\n# para usuários que utilizam npm\nnpm update typescriptO suporte do Flow aos fragmentos JSX estão disponíveis a partir da versão 0.59! Apenas execute
\n# para usuários que utilizam yarn\nyarn upgrade flow-bin\n# para usuários que utilizam npm\nnpm update flow-binpara atualizar o Flow para a última versão.
\nO Prettier adicionou suporte à fragmentos em sua versão 1.9.
\nFragmentos JSX são suportados pelo ESLint 3.x, quando este é utilizado junto ao babel-eslint:
\n# para usuários que utilizam yarn\nyarn add eslint@3.x babel-eslint@7\n# para usuários que utilizam npm\nnpm install eslint@3.x babel-eslint@7ou se você já utiliza, então atualize:
\n# para usuários que utilizam yarn\nyarn upgrade eslint@3.x babel-eslint@7\n# para usuários que utilizam npm\nnpm update eslint@3.x babel-eslint@7Assegure que você tenha a seguinte linha dentro de seu .eslintrc:
"parser": "babel-eslint"É isso aí!
\nObserve que o babel-eslint não é oficialmente suportado pelo ESLint. Nós estaremos procurando adicionar o suporte aos fragmentos ao ESLint 4.x ao decorrer das próximas semanas (veja a discussão #9662)
Talvez demore um pouco para a sintaxe do fragmento ser suportada pelo seu editor de texto. Por favor, seja paciente enquanto a comunidade trabalha para adotar as últimas mudanças. Ao decorrer deste meio tempo, você talvez veja erros ou inconsistências de destacamento se o seu editor ainda não suporta a sintaxe de fragmento. Geralmente, estes erros podem ser desconsiderados com segurança.
\nSe você é um usuário de TypeScript — boas notícias! O suporte do editor à sintaxe de fragmentos JSX já encontra-se disponível em Visual Studio 2015, Visual Studio 2017, Visual Studio Code e Sublime Text via Gerenciador de Pacote.
\nPara outras ferramentas, por favor, verifique com a documentação correspondente se há suporte disponível. Porém, se você estiver restrito pelo seu ferramental, você pode sempre começar usando o componente <Fragment> e realizar uma refatoração depois, para assim, utilizar da sintaxe abreviada quando o suporte apropriado estiver disponível.
O React v16.2.0 está disponível no registro npm.
\nPara instalar o React 16 com o Yarn, execute:
\nyarn add react@^16.2.0 react-dom@^16.2.0Para instalar o React 16 com o npm, execute:
\nnpm install --save react@^16.2.0 react-dom@^16.2.0Nós também fornecemos compilações UMD do React via CDN:
\n<script crossorigin src=\"https://unpkg.com/react@16/umd/react.production.min.js\"></script>\n<script crossorigin src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"></script>Consulte a documentação para instruções de instalações detalhadas.
\nFragment como uma exportação nomeada ao React. (@clemmy em #10783)React.Children. (@MatteoVH em #11422)onChange em alguns casos. (@jquense em #11028)setState(), quanto ao acionamento antecipado através do componentWillMount. (@accordeiro em #11507)react-reconciler/reflection junto aos utilitários para os renderizadores personalizados. (@rivenhk em #11683)Esta versão se tornou possível graças aos nossos colaboradores de código aberto. Um grande obrigado a todos aqueles que relataram problemas, contribuiram com discussões sobre a sintaxe, revisaram as solicitações de mudanças, adicionaram suporte aos fragmentos JSX em bibliotecas terceiras, e mais!
\nUm agradecimento especial aos times do TypeScript e Flow, assim como, aos responsáveis do Babel, quem nos ajudou a produzir o ferramental de suporte para a nova sintaxe funcionar perfeitamente.
\nObrigado ao Gajus Kuizinas e aos outros contribuidores que prototiparam o componente Fragment em código aberto.