Erro de análise: os elementos JSX adjacentes devem ser agrupados em uma tag delimitadora

Estou tentando configurar meu aplicativo React.js para que ele seja processado apenas se uma variável definida por mim for verdadeira.

A maneira como minha function de renderização é configurada se parece com:

render: function() { var text = this.state.submitted ? 'Thank you! Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:'; var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {}; return ( 
if(this.state.submitted==false) { }
) },

Basicamente, a parte importante aqui é a parte if (this.state.submitted == false) (eu quero que esses divs apareçam quando a variável submetida estiver configurada para false).

Mas ao executar isso, recebo o erro na pergunta:

Erro não detectado: Erro de análise: linha 38: os elementos JSX adjacentes devem ser agrupados em uma tag delimitadora

Qual é o problema aqui? E o que posso usar para fazer isso funcionar?

    Você deve colocar seu componente entre uma tag de fechamento, que significa:

     //WRONG! return (   ) 

    Em vez de:

     //Correct return ( 
    )

    É tarde para responder a esta pergunta, mas eu pensei que vai acrescentar à explicação.

    Está acontecendo porque em qualquer parte do seu código você está retornando dois elementos simultaneamente.

    por exemplo

     return( 
    )

    Deve ser envolvido em um elemento pai . por exemplo

      return( 
    )

    Explicação mais detalhada

    Seu código jsx abaixo é transformado

     class App extends React.Component { render(){ return ( 

    Welcome to React

    ); } }

    nisso

     _createClass(App, [{ key: 'render', value: function render() { return React.createElement( 'div', null, React.createElement( 'h1', null, 'Welcome to React' ) ); } }]); 

    Mas se você fizer isso

     class App extends React.Component { render(){ return ( 

    Welcome to React

    Hi
    ); } }

    isso é convertido para isso (apenas para fins de ilustração, na verdade, você obterá um error : Adjacent JSX elements must be wrapped in an enclosing tag )

     _createClass(App, [{ key: 'render', value: function render() { return React.createElement( 'div', null, 'Hi' ); return React.createElement( 'h1', null, 'Welcome to React' ) } }]); 

    No código acima, você pode ver que está tentando retornar duas vezes de uma chamada de método, o que obviamente está errado.

    O elemento Reagir deve retornar apenas um elemento. Você terá que envolver ambas as suas tags com outra tag de elemento.

    Eu também posso ver que sua function de renderização não está retornando nada. É assim que o seu componente deve ser:

     var app = React.createClass({ render () { /*React element can only return one element*/ return ( 
    ) } })

    Também, por favor, note que você não pode usar se statments dentro de um elemento retuned.

     render: function() { var text = this.state.submitted ? 'Thank you! Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:'; var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {}; if(this.state.submitted==false) { return  } else { return  } }, 

    Se você não quiser envolvê-lo em outro div como outras respostas sugeriram, você também pode envolvê-lo em um array e ele funcionará.

     // Wrong! return (   ) 

    Pode ser escrito como:

     // Correct! return ( [, ] ) 

    Por favor, note que o acima irá gerar um aviso: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'. Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.

    Isso pode ser corrigido, adicionando um atributo de key para os componentes, se adicionar manualmente estes adicionar como:

     return ( [, ] ) 

    Aqui estão mais algumas informações sobre as chaves: http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

    O problema

    Erro de análise: os elementos JSX adjacentes devem ser agrupados em uma tag delimitadora

    Isso significa que você está tentando retornar vários elementos JSX irmãos de maneira incorreta. Lembre-se que você não está escrevendo HTML, mas JSX! Seu código é transferido do JSX para o JavaScript. Por exemplo:

     render() { return (

    foo bar

    ); }

    será transpilado para:

     render() { return React.createElement("p", null, "foo bar"); } 

    A menos que você seja novato em programação em geral, você já sabe que funções / methods (de qualquer idioma) recebem qualquer número de parâmetros, mas sempre retornam apenas um valor. Dado isso, você provavelmente pode ver que surge um problema ao tentar retornar vários componentes irmãos baseados em como o createElement() funciona; só leva parâmetros para um elemento e retorna isso. Portanto, não podemos retornar vários elementos de uma chamada de function.


    Então, se você já se perguntou por que isso funciona …

     render() { return ( 

    foo

    bar

    baz

    ); }

    mas não isso …

     render() { return ( 

    foo

    bar

    baz

    ); }

    é porque, no primeiro snippet, ambos os

    -elements fazem parte dos children do elemento

    . Quando eles fazem parte de children então podemos expressar um número ilimitado de elementos irmãos. Dê uma olhada como isso seria transpile:

     render() { return React.createElement( "div", null, React.createElement("p", null, "foo"), React.createElement("p", null, "bar"), React.createElement("p", null, "baz"), ); } 

    Soluções

    Dependendo de qual versão do React você está executando, você tem algumas opções para resolver isso:

    • Use fragments (apenas Reagir v16.2 +!)

      A partir do React v16.2, o React tem suporte para Fragmentos, que é um componente sem nó que retorna seus filhos diretamente.

      Retornar os filhos em uma matriz (veja abaixo) tem algumas desvantagens:

      • Filhos em uma matriz devem ser separados por vírgulas.
      • Crianças em uma matriz devem ter uma chave para evitar o aviso principal do React.
      • As strings devem ser encapsuladas.

      Estes são eliminados do uso de fragments. Aqui está um exemplo de crianças envolvidas em um fragment:

       render() { return ( <>     ); } 

      que de-açúcares em:

       render() { return (      ); } 

      Observe que o primeiro snippet requer o Babel v7.0 ou superior.


    • Devolve uma matriz (React v16.0 + apenas!)

      A partir do React v16, o React Components pode retornar matrizes. Isso é diferente das versões anteriores do React, em que você foi forçado a envolver todos os componentes irmãos em um componente pai.

      Em outras palavras, você pode fazer agora:

       render() { return [

      foo

      ,

      bar

      ]; }

      isso transpila para:

       return [React.createElement("p", {key: 0}, "foo"), React.createElement("p", {key: 1}, "bar")]; 

      Observe que o acima retorna uma matriz. Matrizes são React Elements válidos desde a versão 16 e posterior do React. Para versões anteriores do React, os arrays não são objects de retorno válidos!

      Observe também que o seguinte é inválido (você deve retornar uma matriz):

       render() { return (

      foo

      bar

      ); }

    • Embrulhe os elementos em um elemento pai

      A outra solução envolve a criação de um componente pai que envolve os componentes irmãos em seus children . Esta é de longe a forma mais comum de resolver este problema e funciona em todas as versões do React.

       render() { return ( 

      foo

      bar

      ); }

      Nota: Dê uma olhada novamente no topo desta resposta para obter mais detalhes e como isso se aplica .

    Reagir 16.0.0 podemos retornar vários componentes de render como uma matriz.

     return ([ ,  ]); 

    Reagir 16.4.0 podemos retornar vários componentes de renderização em uma tag Fragment. Fragmento

     return (    ); 

    Futuro Reagir você será capaz de usar esta syntax abreviada. (muitas ferramentas ainda não suportam isso, portanto, você pode querer escrever explicitamente até que o conjunto de ferramentas seja recuperado.)

     return ( <>   ) 

    O Reagir 16 obtém o seu retorno como um array, por isso deve ser envolvido por um elemento como div.

    Abordagem Errada

     render(){ return(   ); } 

    Abordagem correta (todos os elementos em uma div ou outro elemento que você está usando)

     render(){ return( 
    ); }

    Importar visualização e agrupar na View . Envolvendo em um div não funcionou para mim.

     import { View } from 'react-native'; ... render() { return (  

    foo

    bar

    ); }