Zugriff auf übergeordnete und untergeordnete Zustände und Funktionen in React Native

Bei der Arbeit mit React Native ist es üblich, wiederverwendbare und modulare Komponenten zu erstellen. Manchmal benötigen wir untergeordnete Komponenten, um auf den Status und die Funktionen in der übergeordneten Komponente zuzugreifen oder diese zu ändern, und umgekehrt. Diese Kommunikation zwischen übergeordneten und untergeordneten Komponenten kann auf verschiedene Arten erreicht werden. Lassen Sie uns in verschiedene Techniken eintauchen, die es einfacher machen, Status und Funktionalität zwischen übergeordneten und untergeordneten Komponenten in React Native zu teilen.

---

1. Übergabe von Status und Funktionen vom Elternteil an das Kind

Verwendung von Requisiten

Requisiten sind die einfachste Möglichkeit, Daten und Funktionen von einer übergeordneten an eine untergeordnete Komponente weiterzugeben. Dies ist besonders nützlich, wenn das übergeordnete Element ein Verhalten oder Daten in der untergeordneten Komponente steuern muss.

Beispiel: Übergabe des Status und der Funktion des übergeordneten Elements an das untergeordnete Element

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Function to increment count
  const incrementCount = () => setCount(count + 1);

  return (
    <View>
      <Text>Count: {count}</Text>
      <ChildComponent count={count} incrementCount={incrementCount} />
    </View>
  );
};

const ChildComponent = ({ count, incrementCount }) => {
  return (
    <View>
      <Text>Count from Parent: {count}</Text>
      <Button title="Increment Count" onPress={incrementCount} />
    </View>
  );
};

export default ParentComponent;

In diesem Beispiel:

• Die übergeordnete Komponente (ParentComponent) verfügt über einen Zählstatus und eine InkrementCount-Funktion.
• Diese werden über Requisiten an die untergeordnete Komponente (ChildComponent) weitergegeben.
• Die untergeordnete Komponente kann den Status der übergeordneten Komponente mithilfe der bereitgestellten Funktion anzeigen und bearbeiten.

---

2. Zugriff auf die untergeordnete Funktionalität über das übergeordnete Element

Um Funktionen in einer untergeordneten Komponente von der übergeordneten Komponente auszulösen, können wir refs und Callback-Funktionen verwenden.

Verwendung von useRef mit forwardRef

Durch die Verwendung von useRef zusammen mit React.forwardRef kann das übergeordnete Element direkt auf untergeordnete Funktionen zugreifen und so mehr Kontrolle über die untergeordnete Komponente erhalten.

Beispiel: Untergeordnete Funktion vom übergeordneten Element aufrufen

import React, { useRef } from 'react';
import { View, Button, Text } from 'react-native';

const ParentComponent = () => {
  const childRef = useRef(null);

  // Function to call child function from parent
  const callChildFunction = () => {
    if (childRef.current) {
      childRef.current.showAlert();
    }
  };

  return (
    <View>
      <Button title="Call Child Function" onPress={callChildFunction} />
      <ChildComponent ref={childRef} />
    </View>
  );
};

const ChildComponent = React.forwardRef((props, ref) => {
  const showAlert = () => {
    alert('Child Function Called!');
  };

  React.useImperativeHandle(ref, () => ({
    showAlert
  }));

  return (
    <View>
      <Text>This is the child component.</Text>
    </View>
  );
});

export default ParentComponent;

In diesem Beispiel:

• Wir verwenden React.forwardRef, um einen Verweis vom übergeordneten Element an das untergeordnete Element zu übergeben.
• Die untergeordnete Komponente definiert eine showAlert-Funktion, die dem übergeordneten Element mithilfe von useImperativeHandle zugänglich gemacht wird.
• Der Elternteil kann dann showAlert aufrufen, indem er auf die ChildRef zugreift.

---

3. Zugriff auf den übergeordneten Status und die Funktionen in tief verschachtelten Komponenten

In Fällen, in denen Komponenten mehrere Ebenen tief verschachtelt sind, kann die Weiterleitung von Requisiten durch jede Komponente umständlich werden. Für diese Szenarien bietet die React Context API eine Lösung, indem sie die gemeinsame Nutzung von Status und Funktionen im gesamten Komponentenbaum ermöglicht.

Verwenden der React Context API

Beispiel: Zugriff auf den Status und die Funktion des übergeordneten Elements in einem tief verschachtelten untergeordneten Element

import React, { createContext, useContext, useState } from 'react';
import { View, Button, Text } from 'react-native';

const CountContext = createContext();

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => setCount(count + 1);

  return (
    <CountContext.Provider value={{ count, incrementCount }}>
      <View>
        <Text>Count: {count}</Text>
        <NestedChildComponent />
      </View>
    </CountContext.Provider>
  );
};

const NestedChildComponent = () => {
  return (
    <View>
      <DeepChildComponent />
    </View>
  );
};

const DeepChildComponent = () => {
  const { count, incrementCount } = useContext(CountContext);

  return (
    <View>
      <Text>Count from Context: {count}</Text>
      <Button title="Increment Count" onPress={incrementCount} />
    </View>
  );
};

export default ParentComponent;

In diesem Beispiel:

• Wir verwenden createContext, um CountContext zu erstellen, der die Funktionen count und incrementCount enthält.
• ParentComponent umschließt die verschachtelten Komponenten in CountContext.Provider, um Zugriff auf den Zählstatus und die InkrementCount-Funktion zu ermöglichen.
• DeepChildComponent, das mehrere Ebenen tief verschachtelt sein kann, kann mithilfe von useContext.
problemlos auf den Zählstatus und die InkrementCount-Funktion zugreifen

---

4. Aktualisieren des übergeordneten Status vom untergeordneten Status ohne Kontext

Wenn die untergeordnete Komponente den Status der übergeordneten Komponente aktualisieren muss und Sie die Kontext-API lieber nicht verwenden möchten, können Sie eine Rückruffunktion von der übergeordneten Komponente an die untergeordnete Komponente übergeben.

Beispiel: Aktualisieren des übergeordneten Status mit untergeordnetem Rückruf

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Function to increment count
  const incrementCount = () => setCount(count + 1);

  return (
    <View>
      <Text>Count: {count}</Text>
      <ChildComponent count={count} incrementCount={incrementCount} />
    </View>
  );
};

const ChildComponent = ({ count, incrementCount }) => {
  return (
    <View>
      <Text>Count from Parent: {count}</Text>
      <Button title="Increment Count" onPress={incrementCount} />
    </View>
  );
};

export default ParentComponent;

In diesem Beispiel:

• Die übergeordnete Komponente definiert eine Funktion updateMessage, um ihren Status zu ändern.
• Diese Funktion wird als Requisite an die untergeordnete Komponente übergeben.
• Das Kind kann diese Funktion aufrufen, um den Nachrichtenstatus des Elternteils zu aktualisieren.

---

Abschluss

React Native bietet verschiedene Methoden, um die Kommunikation zwischen übergeordneten und untergeordneten Komponenten zu erleichtern. Je nach Bedarf:

• Verwenden Sie Requisiten für den einfachen Daten- und Funktionsaustausch zwischen direktem Elternteil und Kind.
• Verwenden Sie refs mit forwardRef, um übergeordneten Komponenten den Aufruf untergeordneter Funktionen zu ermöglichen.
• Kontext-API eignet sich hervorragend zum Teilen von Daten über tief verschachtelte Komponenten hinweg.
• Rückruffunktionen bieten Kindern eine direkte Möglichkeit, den übergeordneten Status zu aktualisieren, ohne dass ein globaler Kontext erforderlich ist.

Diese Methoden können bei richtiger Anwendung Ihre Fähigkeit, komplexe Komponentenhierarchien in React Native zu verwalten und zu organisieren, erheblich verbessern. Experimentieren Sie mit jedem, um herauszufinden, welches den Anforderungen Ihres Projekts am besten entspricht. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonZugriff auf übergeordnete und untergeordnete Zustände und Funktionen in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!