Den Zustand anheben: Wie untergeordnete Komponenten auf die Kommunikation mit den Eltern reagieren

React verwendet einen einseitigen Datenfluss vom übergeordneten zum untergeordneten Element, niemals vom untergeordneten zum übergeordneten Element. Aber was passiert, wenn ein Kind mit seinen Eltern kommunizieren muss?

Erfahren Sie, wie Sie den Status aufheben, damit eine untergeordnete Komponente Daten an eine übergeordnete Komponente senden kann.

Komponenten in React

React organisiert Komponenten in einer Hierarchie, in der untergeordnete Komponenten in übergeordneten Komponenten verschachtelt sind. Diese Hierarchie bildet die Bausteine ​​der Benutzeroberfläche der Anwendung.

</ParentComponent>

Jede untergeordnete Komponente empfängt Daten, sogenannte Requisiten, von ihrer übergeordneten Komponente. React-Requisiten können verschiedene Datentypen wie Arrays, Objekte, Strings oder sogar Funktionen enthalten. Die untergeordnete Komponente kann diese Daten nicht direkt bearbeiten.

Betrachten Sie die folgende Komponente mit dem Namen CounterButton:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

Die Komponente verwaltet einen Statuswert mit dem Namen zählen Dies erhöht sich jedes Mal, wenn ein Benutzer auf die Schaltfläche klickt.

Angenommen, Sie haben die CounterButton-Komponente in einer anderen Komponente namens Home verschachtelt:

const Home = () => {
return (

 )
}

Wenn Sie den Zählwert aus dem anzeigen möchten CounterButton Wenn Sie die Komponente „Home“ in die Home-Komponente einfügen, stoßen Sie auf eine Herausforderung.

Wie bereits erwähnt, erzwingt React einen unidirektionalen Datenfluss vom übergeordneten zum untergeordneten Element. Daher kann die CounterButton-Komponente den Zählstatuswert nicht direkt mit der Home-Komponente teilen.

Um dies zu umgehen, müssen Sie den Staat stärken.

So heben Sie den Status an, um Daten zwischen Komponenten auszutauschen

Der Status „Lifting“ bezieht sich auf das Verschieben des Status einer Komponente nach oben im Komponentenbaum, zu einer übergeordneten Komponente. Sobald Sie den Status angehoben haben, können Sie ihn als Requisitenwerte an untergeordnete Komponenten weitergeben.

Im Gegenbeispiel von früher müssten Sie den Zählstatus und die verschieben handleInkrement Funktion zur Home-Komponente hinzufügen. Anschließend müssten Sie die Funktion handleIncrement als Requisite an die CounterButton-Komponente übergeben.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

Als Nächstes müssen Sie die CounterButton-Komponente so ändern, dass sie die handleIncrement-Funktion akzeptiert und sie aufruft, wenn ein Benutzer auf die Schaltfläche klickt.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

Durch die Aufhebung des Staates werden die Daten zentralisiert und die Verantwortung übertragen den Staat verwalten vom Kind zum Elternteil.

Das Anheben des Status hilft Ihnen nicht nur dabei, Daten in der übergeordneten Komponente anzuzeigen, sondern kann Ihnen auch dabei helfen, Daten über mehrere Komponenten hinweg zu synchronisieren.

Angenommen, Sie hätten eine Kopf- und Fußzeilenkomponente in der übergeordneten Komponente verschachtelt und jede dieser Komponenten zeigt auch die gemeinsame Anzahl an. Um diesen Wert zu teilen, können Sie ihn als Requisiten an diese Komponenten übergeben.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

Sie müssen jedoch beim Anheben des Zustands vorsichtig sein, um nicht in eine Situation zu geraten, die als Propellerbohren bezeichnet wird.

Die Herausforderung des Propellerbohrens

Wenn Ihre Anwendung wächst, stellen Sie möglicherweise fest, dass mehrere Komponenten tiefer im Komponentenbaum Zugriff auf einen gemeinsamen Status benötigen. Um diesen gemeinsamen Zustand den verschachtelten Komponenten zur Verfügung zu stellen, müssen Sie Requisiten über Zwischenkomponenten weiterleiten. Dieser Vorgang kann zum Bohren von Stützen führen.

Prop Drilling macht es schwierig, den Datenfluss zu verfolgen und kann zu schwer zu wartendem Code führen.

Um das Bohren von Propellern zu verringern und dennoch Daten von verschiedenen Komponenten auszutauschen, sollten Sie die Verwendung des React-Kontexts in Betracht ziehen. Mit dem Reaktionskontext können Sie den Status zentralisieren, sodass er in der gesamten Anwendung verfügbar ist.

Teilen von Daten in Reaktion mithilfe von Requisiten

Wenn Sie Daten von einer untergeordneten Komponente mit ihrer übergeordneten Komponente teilen müssen, erhöhen Sie den Status der übergeordneten Komponente und übergeben Sie dann die Funktion, die den Status aktualisiert, als Requisiten an die untergeordnete Komponente.

In Fällen, in denen die untergeordnete Komponente tief im Komponentenbaum verschachtelt ist, verwenden Sie ein Statusverwaltungstool wie React Context oder ein Drittanbieter-Tool wie React Redux, um Prop Drilling zu verhindern.