Próbuję skonfigurować moją React.jsaplikację, aby renderowała się tylko wtedy, gdy ustawiona jest zmienna true.

Sposób konfiguracji mojej funkcji renderowania wygląda następująco:

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 (
    <div>

if(this.state.submitted==false) 
{

      <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
      <div className="button-row">
         <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
     </div>
     </ReactCSSTransitionGroup>
}
   </div>
    )
  },

Zasadniczo ważną częścią jest tutaj if(this.state.submitted==false)część (chcę, aby te divelementy pojawiały się, gdy ustawiona zmienna jest ustawiona na false).

Ale podczas uruchamiania pojawia się błąd w pytaniu:

Nieprzechwycony błąd: Błąd analizy: wiersz 38: Sąsiadujące elementy JSX muszą być owinięte w otaczający tag

O co tu chodzi? I czego mogę użyć, aby to zadziałało?

Powinieneś umieścić swój komponent między zamykającym tagiem, co oznacza:

// WRONG!

return (  
    <Comp1 />
    <Comp2 />
)

Zamiast:

// Correct

return (
    <div>
       <Comp1 />
       <Comp2 />
    </div>
)

Edycja: komentarz Per Joe Claya na temat API Fragments

// More Correct

return (
    <React.Fragment>
       <Comp1 />
       <Comp2 />
    </React.Fragment>
)

// Short syntax

return (
    <>
       <Comp1 />
       <Comp2 />
    </>
)

Późno jest odpowiedzieć na to pytanie, ale pomyślałem, że doda to wyjaśnienia.

Dzieje się tak, ponieważ w dowolnym miejscu w kodzie zwracane są jednocześnie dwa elementy.

na przykład

return(
    <div id="div1"></div>
    <div id="div1"></div>
  )

Powinien być zawinięty w element nadrzędny . na przykład

 return(
      <div id="parent">
        <div id="div1"></div>
        <div id="div1"></div>
      </div>
      )

Twój poniższy jsxkod zostanie przekształcony

class App extends React.Component {
  render(){
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}

zaangażowany w to

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

Ale jeśli to zrobisz

class App extends React.Component {
  render(){
    return (
        <h1>Welcome to React</h1>
        <div>Hi</div>
    );
  }
}

przekształca się w to (tylko dla celów ilustracyjnych, faktycznie dostaniesz 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'
        )
    }
  }]);

W powyższym kodzie widać, że próbujesz powrócić dwukrotnie z wywołania metody, co jest oczywiście błędne.

Edycja - Ostatnie zmiany w React 16 i totemy własne:

Jeśli nie chcesz dodawać dodatkowych elementów div, aby je zawinąć i chcesz zwrócić więcej niż jeden element podrzędny, z którym możesz skorzystać React.Fragments.

React.Fragments są nieco szybsze i mają mniejsze zużycie pamięci (nie trzeba tworzyć dodatkowego węzła DOM, mniej zaśmiecone drzewo DOM).

np. (w React 16.2.0)

render() {
  return (
    <>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    </>
  );
}

lub

render() {
  return (
    <React.Fragments>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    <React.Fragments/>
  );
}

lub

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}

Element React musi zwrócić tylko jeden element. Będziesz musiał zawinąć oba swoje tagi innym tagiem elementu.

Widzę też, że twoja funkcja renderowania nic nie zwraca. Tak powinien wyglądać twój komponent:

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

Należy również pamiętać, że nie można używać ifinstrukcji wewnątrz zwracanego elementu:

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 <YourJSX />
    } else {
        return <YourOtherJSX />
    }
},

Jeśli nie chcesz zawijać go w inny div, jak sugerują inne odpowiedzi, możesz również zawinąć go w tablicę i będzie działać.

// Wrong!
return (  
   <Comp1 />
   <Comp2 />
)

Można go zapisać jako:

// Correct!
return (  
    [<Comp1 />,
    <Comp2 />]
)

Pamiętaj, że powyższe wygeneruje ostrzeżenie: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.

Można to naprawić, dodając keyatrybut do komponentów, jeśli dodając je ręcznie, dodaj go w następujący sposób:

return (  
    [<Comp1 key="0" />,
    <Comp2 key="1" />]
)

Oto kilka dodatkowych informacji na temat kluczy: Kompozycja vs. Dziedziczenie

Problem

Błąd analizy: sąsiednie elementy JSX muszą być owinięte w otaczający tag

Oznacza to, że próbujesz zwrócić wiele elementów JSX rodzeństwa w niepoprawny sposób. Pamiętaj, że nie piszesz HTML, ale JSX! Twój kod jest transpilowany z JSX do JavaScript. Na przykład:

render() {
  return (<p>foo bar</p>);
}

zostaną przełożone na:

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

Jeśli nie jesteś początkujący w programowaniu, wiesz już, że funkcje / metody (dowolnego języka) przyjmują dowolną liczbę parametrów, ale zawsze zwracają tylko jedną wartość. Biorąc to pod uwagę, prawdopodobnie możesz zauważyć, że pojawia się problem podczas próby zwrócenia wielu komponentów rodzeństwa w zależności od tego, jak createElement()działa; pobiera parametry tylko dla jednego elementu i zwraca to. Dlatego nie możemy zwrócić wielu elementów z jednego wywołania funkcji.

Więc jeśli kiedykolwiek zastanawiałeś się, dlaczego to działa ...

render() {
  return (
    <div>
      <p>foo</p>
      <p>bar</p>
      <p>baz</p>
    </div>
  );
}

ale nie to ...

render() {
  return (
    <p>foo</p>
    <p>bar</p>
    <p>baz</p>
  );
}

to dlatego, że w pierwszym fragmencie, obie <p>-elements są częścią childrentego <div>-elementowe. Gdy są one częścią children, możemy wyrazić nieograniczoną liczbę elementów rodzeństwa. Zobacz, jak to się przełoży:

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

Rozwiązania

W zależności od używanej wersji programu React masz kilka opcji rozwiązania tego problemu:

• Używaj fragmentów (tylko React v16.2 +!)

  Począwszy od wersji 16.2 React, React obsługuje Fragmenty, które są komponentem bez węzłów, który zwraca bezpośrednio swoje elementy potomne.

  Zwracanie dzieci do tablicy (patrz poniżej) ma pewne wady:

  • Dzieci w tablicy muszą być oddzielone przecinkami.
  • Dzieci w tablicy muszą mieć klucz, aby zapobiec ostrzeżeniu o kluczu React.
  • Ciągi muszą być owinięte w cudzysłów.

  Są one eliminowane ze stosowania fragmentów. Oto przykład dzieci owiniętych we fragment:

  render() {
    return (
      <>
        <ChildA />
        <ChildB />
        <ChildC />
      </>
    );
  }

  który de-cukry na:

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

  Pamiętaj, że pierwszy fragment wymaga Babel w wersji 7.0 lub nowszej.

  ---

• Zwraca tablicę (React v16.0 +!)

  Począwszy od wersji 16 React, komponenty React mogą zwracać tablice. Jest to inaczej niż we wcześniejszych wersjach React, w których zmuszono Cię do zawinięcia wszystkich komponentów rodzeństwa w komponent nadrzędny.

  Innymi słowy, możesz teraz:

  render() {
    return [<p key={0}>foo</p>, <p key={1}>bar</p>];
  }

  przekłada się to na:

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

  Zauważ, że powyższe zwraca tablicę. Tablice są poprawnymi elementami React od wersji React 16 i późniejszych. We wcześniejszych wersjach React tablice nie są prawidłowymi obiektami zwrotnymi!

  Pamiętaj również, że następujące informacje są nieprawidłowe (musisz zwrócić tablicę):

  render() {
    return (<p>foo</p> <p>bar</p>);
  }

  ---

• Zawiń elementy w element nadrzędny

  Drugie rozwiązanie polega na utworzeniu komponentu nadrzędnego, który zawija w nim komponenty rodzeństwa children. Jest to zdecydowanie najczęstszy sposób rozwiązania tego problemu i działa we wszystkich wersjach React.

  render() {
    return (
      <div>
        <h1>foo</h1>
        <h2>bar</h2>
      </div>
    );
  }

  Uwaga: spójrz ponownie na górę tej odpowiedzi, aby uzyskać więcej informacji i sposób jej transpozycji .

React 16.0.0 możemy zwrócić wiele komponentów z renderowania jako tablicę.

return ([
    <Comp1 />,
    <Comp2 />
]);

Reaguj 16.4.0 możemy zwrócić wiele komponentów z renderowania w tagu Fragment. Fragment

return (
<React.Fragment>
    <Comp1 />
    <Comp2 />
</React.Fragment>);

Future React będziesz mógł używać tej skróconej składni. (wiele narzędzi jeszcze go nie obsługuje, więc możesz chcieć pisać, <Fragment>dopóki narzędzie nie nadejdzie)

return (
<>
    <Comp1 />
    <Comp2 />
</>)

Jeśli nie zawiniesz swojego komponentu, możesz napisać go w sposób opisany poniżej.

Zamiast:

return(
  <Comp1 />
  <Comp2 />
     );

możesz to napisać:

return[(
 <Comp1 />
),
(
<Comp2 />
) ];

to bardzo proste, możemy użyć elementu div elementu nadrzędnego, aby owinąć cały element, lub możemy zastosować koncepcję komponentu wyższego rzędu (HOC), tj. bardzo przydatne do reagowania na aplikacje js

render() {
  return (
    <div>
      <div>foo</div>
      <div>bar</div>
    </div>
  );
}

lub innym najlepszym sposobem jest HOC jest bardzo prosty, niezbyt skomplikowany, po prostu dodaj plik hoc.js do swojego projektu i po prostu dodaj te kody

const aux = (props) => props.children;
export default aux;

teraz zaimportuj plik hoc.js tam, gdzie chcesz użyć, teraz zamiast owijania elementem div możemy owinąć go hoc.

import React, { Component } from 'react';
import Hoc from '../../../hoc';

    render() {
      return (
    <Hoc>
        <div>foo</div>
        <div>bar</div>
    </Hoc>
      );
    }

Reakcja polega na tym, że wyrażenie JSX musi mieć dokładnie jeden najbardziej zewnętrzny element.

źle

const para = (
    <p></p>
    <p></p>
);

poprawny

const para = (
    <div>
        <p></p>
        <p></p>
    </div>
);

React 16 otrzymuje zwrot jako tablicę, więc powinien być zawinięty przez jeden element, taki jak div.

Niewłaściwe podejście

render(){
    return(
    <input type="text" value="" onChange={this.handleChange} />

     <button className="btn btn-primary" onClick=   {()=>this.addTodo(this.state.value)}>Submit</button>

    );
}

Właściwe podejście (wszystkie elementy w jednym div lub innym używanym elemencie)

render(){
    return(
        <div>
            <input type="text" value="" onChange={this.handleChange} />

            <button className="btn btn-primary" onClick={()=>this.addTodo(this.state.value)}>Submit</button>
        </div>
    );
}

Składniki reagujące muszą być zapakowane w pojedynczy pojemnik, którym może być dowolny tag np. „<Div> .. </ div>”

Możesz sprawdzić metodę renderowania ReactCSSTransitionGroup

Zaimportuj widok i zawiń View. Zawijanie w divnie działało dla mnie.

import { View } from 'react-native';
...
    render() {
      return (
        <View>
          <h1>foo</h1>
          <h2>bar</h2>
        </View>
      );
    }

Nieprawidłowy: nie tylko elementy potomne

render(){
        return(
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        )
    }

Prawidłowy: element główny pod elementami potomnymi

render(){
        return(
          <div>
            <h2>Responsive Form</h2>
            <div>Adjacent JSX elements must be wrapped in an enclosing tag</div>
            <div className="col-sm-4 offset-sm-4">
                <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
                    <div className="form-group">
                        <label for="name">Name</label>
                        <input type="text" className="form-control" id="name" />
                    </div>
                    <div className="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
                    </div>
                    <div className="form-group">
                        <label for="message">Message</label>
                        <textarea className="form-control" rows="5" id="message"></textarea>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
          </div>
        )
    }

Dla programistów Rect-Native. Wystąpił ten błąd podczas renderowaniaItem w FlatList. Miałem dwa komponenty tekstowe. Używałem ich jak poniżej

renderItem = { ({item}) => 
     <Text style = {styles.item}>{item.key}</Text>
     <Text style = {styles.item}>{item.user}</Text>
}

Ale po tym, jak położyłem te holownicze komponenty Inside View, zadziałało to dla mnie.

renderItem = { ({item}) => 
   <View style={styles.flatview}>
      <Text style = {styles.item}>{item.key}</Text>
      <Text style = {styles.item}>{item.user}</Text>
   </View>
 }

Być może korzystasz z innych komponentów, ale umieszczenie ich w widoku może być dla Ciebie odpowiednie.

Myślę, że komplikacja może również wystąpić podczas próby zagnieżdżenia wielu elementów Div w instrukcji return. Możesz to zrobić, aby zapewnić renderowanie komponentów jako elementów blokowych.

Oto przykład poprawnego renderowania kilku komponentów przy użyciu wielu div.

return (
  <div>
    <h1>Data Information</H1>
    <div>
      <Button type="primary">Create Data</Button>
    </div>
  </div>
)

Miałem problem, który spowodował ten błąd, który nie był do końca oczywisty.

const App = () => {
  return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
  )
}

A oto poprawka ...

const App = () => {
  return (
      <div className="AppClassName">       <--- note the change
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
  )
}

Domyśl. Informacje udostępniane tutaj na wypadek, gdyby inni uderzyli w ten guz. Najwyraźniej nie można mieć nazwy klasy elementów takiej samej jak nazwa funkcji nadrzędnej React.