Jak stworzyć stan współdzielony pomiędzy dwoma komponentami React?

Rodzaj zależności między komponentami określa najlepsze podejście.
Na przykład, Redux jest świetną opcją, jeśli planujesz mieć centralny sklep. Jednak możliwe są również inne podejścia:

• Od rodzica do dziecka [list][*]Rekwizyty
• metoda instancji

[/*]
[*]
Od dziecka do rodzica

• funkcja oddzwaniania
• Wydarzenia w wyskakujących okienkach

[/*]
[*]
Rodzeństwo

• Komponent nadrzędny

[/*]
[*]
Każdy do każdego

• Wzorzec obserwatora
• zmienna globalna
• Kontekst

[/*]
[/list]
Jeszcze

szczegółowe informacje na temat każdego z podejść można znaleźć tutaj
https://www.javascriptstuff.co ... ttern

Chcesz zaimplementować jakiś obiekt, który przechowuje twój stan, który można zmienić za pomocą funkcji wywołania zwrotnego. Następnie możesz przekazać te funkcje swoim komponentom Reacta.
Na przykład możesz stworzyć sklep:

function Store(initialState = {}) {

 this.state = initialState;

}

Store.prototype.mergeState = function(partialState) {

 Object.assign(this.state, partialState);

};var myStore = new Store();ReactDOM.render( <FirstComponent mergeState={myStore.mergeState.bind(myStore)}/>,

 firstElement

 );

ReactDOM.render( <SecondComponent mergeState={myStore.mergeState.bind(myStore)}/>,

 secondElement

 );

Zarówno instancje

FirstComponent

, jak i

SecondComponent

mogą teraz wywoływać

this.props.mergeState ({...})

w celu przypisania stanu do tego samego sklepu.

Store.prototype.getState

zostawiam jako ćwiczenie dla czytelnika.
Zauważ, że zawsze możesz przekazać sam sklep (

myStore

) do komponentów; po prostu czuje się mniej podatny na to.
Oto kilka innych dokumentów, które mogą Cię zainteresować:
Reakcja dokumentów: „Komunikacja między komponentami”
https://facebook.github.io/rea ... tmlDo komunikacji między dwoma komponentami, które nie mają
relację rodzic-dziecko możesz skonfigurować własną globalną
system wydarzeń. Subskrybuj zdarzenia w componentDidMount (), anuluj subskrypcję w
componentWillUnmount () i wywołaj metodę setState () po otrzymaniu zdarzenia.
Wzorzec przepływu jest jednym z możliwych sposobów zorganizowania tego.

Alternatywnie możesz ustawić relację rodzic-dziecko, a następnie przekazać dane do komponentów potomnych jako właściwości.
W przeciwnym razie, jeśli chcesz stworzyć interakcję między dwoma komponentami, które nie są powiązane z żadnym z nich (rodzic/dziecko), możesz zaznaczyć

flux
https://facebook.github.io/flux/
Lub jeszcze lepiej

redux
http://redux.js.org/
.
Powiedziałbym, że powinieneś iść z reduxem.

Zobacz, dlaczego
https://www.quora.com/Should-I ... actJS

Możesz tworzyć własne hooki Reacta, aby współdzielić

stan

między komponentami, ja to zrobiłem

tutaj
https://github.com/makannew/us ... js... Możesz go użyć, pobierając plik

use-linked-state.js

.
Po zaimportowaniu haka

useStateGateway

zadeklaruj bramę w komponencie Parent i przekaż ją do komponentów podrzędnych

import {useStateGateway} from "use-linked-state";

const myGateway = useStateGateway({partA:null, partB:null});

return ( <>

 <ComponentA gateway={myGateway}>

 <ComponentB gateway={myGateway}>

 <ComponentPost gateWay={myGateway}>

 </>

 )

Następnie masz dostęp do stanu współdzielonego między tymi trzema komponentami za pomocą niestandardowego podpięcia useLinkedState

import { useLinkedState } from "use-linked-state";export default function ComponentA({gateway}){ const [state, setState] = useLinkedState(gateway); <your logic>}

Zgodnie z Twoją logiką,

ComponentA

i

ComponentB

będą odpowiedzialne za swój udział we wspólnym obiekcie

{partA: "fill by ComponentA", partB: "fill by componentB" }

.
Na koniec

ComponentPost

publikuje wynik, jeśli

partA

i

partB

udostępnionego obiektu były prawidłowe.
W ten sposób możesz komponować komponenty i nawiązywać między nimi połączenia, aby ze sobą rozmawiać.