Moja struktura wygląda następująco:
Component 1
- |- Component 2
- - |- Component 4
- - - |- Component 5
Component 3
Komponent 3 powinien wyświetlać niektóre dane w zależności od stanu komponentu 5. Ponieważ rekwizyty są niezmienne, nie mogę po prostu zapisać jego stanu w komponencie 1 i przesłać go dalej, prawda? I tak, czytałem o redux, ale nie chcę go używać. Mam nadzieję, że można to rozwiązać tylko za pomocą reakcji. Czy się mylę?
<MyChildComponent setState={(s,c)=>{this.setState(s, c)}} />
jeśli zamierzasz użyć tego hacka, upewnij się, że obsługujesz oddzwonienie.this.setState(p)
? Próbowałem bez nich i wydaje się, że działa (jestem bardzo nowy w React)Odpowiedzi:
Do komunikacji dziecko-rodzic należy przekazać funkcję ustawiania stanu od rodzica do dziecka, tak jak to
W ten sposób dziecko może zaktualizować stan rodzica za pomocą wywołania funkcji przekazanej z rekwizytami.
Ale będziesz musiał przemyśleć strukturę swoich komponentów, ponieważ, jak rozumiem, komponenty 5 i 3 nie są powiązane.
Jednym z możliwych rozwiązań jest zawinięcie ich w komponent wyższego poziomu, który będzie zawierał stan zarówno komponentu 1, jak i 3. Ten komponent ustawi stan niższego poziomu za pomocą rekwizytów.
źródło
this.handler = this.handler.bind(this)
konstruktora,this
wewnątrzhandler
funkcji będzie odwoływać się do zamknięcia funkcji, a nie do klasy. Jeśli nie chcesz powiązać wszystkich funkcji w konstruktorze, istnieją jeszcze dwa sposoby radzenia sobie z tym za pomocą funkcji strzałek. Możesz po prostu napisać moduł obsługi kliknięć jakoonClick={()=> this.setState(...)}
lub użyć inicjatorów właściwości razem z funkcjami strzałek, jak opisano tutaj babeljs.io/blog/2015/06/07/react-on-es6-plus w sekcji „Funkcje strzałek”Znalazłem następujące działające rozwiązanie do przekazania argumentu funkcji onClick z elementu potomnego do komponentu nadrzędnego:
Wersja z przekazaniem metody ()
Spójrz na JSFIDDLE
Wersja z przekazywaniem funkcji strzałki
Spójrz na JSFIDDLE
źródło
<ChildB handleToUpdate = {handleToUpdate.bind(this)} />
Dlaczego musiałem ponownie związać?this
wywołany w dzieckuthis
odnosi się do stanu rodzica, a nie dziecka. To zamknięcie w najlepszym wydaniu!Chcę podziękować najbardziej uprzywilejowanej odpowiedzi za przekazanie mi pomysłu na mój własny problem, w zasadzie jego odmiany z funkcją strzałki i przekazania param z komponentu potomnego:
Mam nadzieję, że to komuś pomoże.
źródło
this
funkcje strzałek odnoszą się do kontekstu rodzica (tj.Parent
Klasy).Podoba mi się odpowiedź dotycząca przekazywania funkcji, to bardzo przydatna technika.
Z drugiej strony możesz to osiągnąć za pomocą pub / sub lub przy użyciu wariantu, dyspozytora, tak jak robi to Flux . Teoria jest bardzo prosta. Niech komponent 5 wyśle komunikat, którego komponent 3 oczekuje. Komponent 3 następnie aktualizuje swój stan, który uruchamia ponowne renderowanie. Wymaga to stanowych komponentów, które w zależności od twojego punktu widzenia mogą, ale nie muszą być anty-wzorcem. Jestem przeciwko nim osobiście i wolałbym, żeby coś innego nasłuchiwało wysyłek i zmian stanu od samego początku (Redux robi to, ale dodaje dodatkową terminologię).
Pakiety rozsyłające z Flux są bardzo proste, po prostu rejestrują połączenia zwrotne i wywołują je, gdy nastąpi jakakolwiek wysyłka, przechodząc przez zawartość na wysyłce (w powyższym zwięzłym przykładzie nie ma
payload
z wysyłką, po prostu identyfikator wiadomości). Możesz to bardzo łatwo dostosować do tradycyjnego pubu / sub (np. Używając EventEmitter z wydarzeń lub innej wersji), jeśli ma to dla ciebie większy sens.źródło
var Dispatcher = require( 'flux' ).Dispatcher
Znalazłem następujące działające rozwiązanie do przekazania argumentu funkcji onClick z elementu potomnego do komponentu nadrzędnego z parametrem:
klasa rodzicielska:
klasa dziecięca:
źródło
param1
jest po prostu wyświetlany na konsoli, nie można go przypisać, zawsze przypisujetrue
Gdy potrzebujesz komunikacji między dzieckiem a rodzicem na niższym poziomie, lepiej skorzystać z kontekstu . W komponencie nadrzędnym zdefiniuj kontekst, który może być wywołany przez dziecko, takie jak
projekt demo można znaleźć na repo
źródło
Wydaje się, że możemy przekazywać dane od rodzica do dziecka, ponieważ reakcja promuje jednokierunkowy przepływ danych, ale aby sama rodzic zaktualizował się, gdy coś się wydarzy w jego „komponencie potomnym”, zwykle używamy tak zwanej „funkcji zwrotnej”.
W tym przykładzie możemy przekazać dane z SubChild -> Child -> Parent, przekazując funkcję do jego bezpośredniego potomka.
źródło
Wielokrotnie korzystałem z najwyżej ocenianej odpowiedzi z tej strony, ale ucząc się React, znalazłem lepszy sposób na zrobienie tego, bez wiązania i bez wbudowanej funkcji wewnątrz rekwizytów.
Spójrz tutaj:
Klawisz znajduje się w funkcji strzałki:
Możesz przeczytać więcej tutaj . Mam nadzieję, że będzie to przydatne dla kogoś =)
źródło
-Możemy utworzyć ParentComponent i za pomocą metody handleInputChange w celu zaktualizowania stanu ParentComponent. Zaimportuj ChildComponent, a my przekażemy dwa rekwizyty z komponentu nadrzędnego na komponent podrzędny, tj. Funkcję i liczenie funkcji handleInputChange.
Teraz tworzymy plik ChildComponent i zapisujemy jako ChildComponent.jsx. Ten składnik jest bezstanowy, ponieważ element potomny nie ma stanu. Używamy biblioteki typów rekwizytów do sprawdzania typów rekwizytów.
źródło
Jeśli ten sam scenariusz nie jest rozpowszechniony wszędzie, możesz użyć kontekstu React, szczególnie jeśli nie chcesz wprowadzać całego obciążenia, jakie wprowadzają biblioteki zarządzania stanem. Ponadto łatwiej się uczyć. Ale bądź ostrożny, możesz go nadużyć i zacząć pisać zły kod. Zasadniczo definiujesz komponent Container (który będzie przechowywał i utrzymywał ten stan dla Ciebie), dzięki czemu wszystkie komponenty będą zainteresowane zapisywaniem / odczytywaniem tego fragmentu danych jako jego elementy potomne (niekoniecznie bezpośrednie elementy potomne)
https://reactjs.org/docs/context.html
Zamiast tego możesz również użyć zwykłego Reacta.
przekazać doSomethingAbout5 aż do składnika 1
Jeśli jest to częsty problem, powinieneś zacząć myśleć o przeniesieniu całego stanu aplikacji w inne miejsce. Masz kilka opcji, najczęściej są to:
https://redux.js.org/
https://facebook.github.io/flux/
Zasadniczo zamiast zarządzać stanem aplikacji w komponencie, wysyłasz polecenia, gdy coś się stanie, aby zaktualizować stan. Komponenty również pobierają stan z tego kontenera, więc wszystkie dane są scentralizowane. Nie oznacza to, że nie można już używać stanu lokalnego, ale jest to bardziej zaawansowany temat.
źródło
więc jeśli chcesz zaktualizować komponent nadrzędny,
Tutaj onChange jest atrybutem, którego metoda „handler” jest powiązana z jego instancją. przekazaliśmy moduł obsługi metody do komponentu klasy Child, aby otrzymać właściwość onChange w argumencie props.
Atrybut onChange zostanie ustawiony w obiekcie rekwizytów w następujący sposób:
i przekazany do komponentu potomnego
Tak więc komponent potomny może uzyskać dostęp do wartości nazwy w obiekcie props, takim jak ten props.onChange
Odbywa się to za pomocą rekwizytów renderujących.
Teraz komponent potomny ma przycisk „Kliknij” z ustawionym zdarzeniem onclick, aby wywołać metodę modułu obsługi przekazaną mu przez onChnge w obiekcie argumentu props. Więc teraz this.props.on Change in Child przechowuje metodę wyjściową w klasie Parent Odniesienia i kredyty: Bity i kawałki
źródło
Tak to robię.
źródło
Większość odpowiedzi podanych powyżej dotyczy projektów opartych na React.Component. Jeśli używasz
useState
najnowszych aktualizacji biblioteki React, postępuj zgodnie z tą odpowiedziąźródło
źródło