Próbuję skonfigurować moją React.js
aplikację, 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 div
elementy 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?
javascript
reactjs
render
użytkownik1072337
źródło
źródło
Odpowiedzi:
Powinieneś umieścić swój komponent między zamykającym tagiem, co oznacza:
Zamiast:
Edycja: komentarz Per Joe Claya na temat API Fragments
źródło
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
Powinien być zawinięty w element nadrzędny . na przykład
Bardziej szczegółowe wyjaśnienie
Twój poniższy
jsx
kod zostanie przekształconyzaangażowany w to
Ale jeśli to zrobisz
przekształca się w to (tylko dla celów ilustracyjnych, faktycznie dostaniesz
error : Adjacent JSX elements must be wrapped in an enclosing tag
)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)
lub
lub
źródło
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:
Należy również pamiętać, że nie można używać
if
instrukcji wewnątrz zwracanego elementu:źródło
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ć.
Można go zapisać jako:
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
key
atrybut do komponentów, jeśli dodając je ręcznie, dodaj go w następujący sposób:Oto kilka dodatkowych informacji na temat kluczy: Kompozycja vs. Dziedziczenie
źródło
Problem
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:
zostaną przełożone na:
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 ...
ale nie to ...
to dlatego, że w pierwszym fragmencie, obie
<p>
-elements są częściąchildren
tego<div>
-elementowe. Gdy są one częściąchildren
, możemy wyrazić nieograniczoną liczbę elementów rodzeństwa. Zobacz, jak to się przełoży: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:
Są one eliminowane ze stosowania fragmentów. Oto przykład dzieci owiniętych we fragment:
który de-cukry na:
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:
przekłada się to na:
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ę):
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.Uwaga: spójrz ponownie na górę tej odpowiedzi, aby uzyskać więcej informacji i sposób jej transpozycji .
źródło
v16.4
pierwszy przykład nie działa przy użyciu<>
<React.Fragment>
React 16.0.0 możemy zwrócić wiele komponentów z renderowania jako tablicę.
Reaguj 16.4.0 możemy zwrócić wiele komponentów z renderowania w tagu Fragment. 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)źródło
,
między komponentami. Jest to tablica, więc musisz oddzielić każdy element w sobie.<Fragment>
, to<React.Fragment>
. tak mówi we własnym linkuimport React { Fragment } from 'react';
<Fragment >
Jeśli nie zawiniesz swojego komponentu, możesz napisać go w sposób opisany poniżej.
Zamiast:
możesz to napisać:
źródło
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
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
teraz zaimportuj plik hoc.js tam, gdzie chcesz użyć, teraz zamiast owijania elementem div możemy owinąć go hoc.
źródło
Fragment
komponentu.Reakcja polega na tym, że wyrażenie JSX musi mieć dokładnie jeden najbardziej zewnętrzny element.
źle
poprawny
źródło
React 16 otrzymuje zwrot jako tablicę, więc powinien być zawinięty przez jeden element, taki jak div.
Niewłaściwe podejście
Właściwe podejście (wszystkie elementy w jednym div lub innym używanym elemencie)
źródło
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
źródło
Zaimportuj widok i zawiń
View
. Zawijanie wdiv
nie działało dla mnie.źródło
View
naprawdę nie jest najlepszym rozwiązaniem.Nieprawidłowy: nie tylko elementy potomne
Prawidłowy: element główny pod elementami potomnymi
źródło
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
Ale po tym, jak położyłem te holownicze komponenty Inside View, zadziałało to dla mnie.
Być może korzystasz z innych komponentów, ale umieszczenie ich w widoku może być dla Ciebie odpowiednie.
źródło
View
nie jest naprawdę najlepszym rozwiązaniem.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.
źródło
Miałem problem, który spowodował ten błąd, który nie był do końca oczywisty.
A oto poprawka ...
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.
źródło