Accès à l'état et aux fonctions du parent et de l'enfant dans React Native

Lorsque vous travaillez avec React Native, il est courant de créer des composants réutilisables et modulaires. Parfois, nous avons besoin de composants enfants pour accéder ou modifier l'état et les fonctions du composant parent, et vice versa. Cette communication entre les composants parent et enfant peut être réalisée de différentes manières. Examinons diverses techniques qui facilitent le partage de l'état et des fonctionnalités entre les composants parents et enfants dans React Native.

1. Passage de l'état et des fonctions du parent à l'enfant

Utiliser des accessoires

Les accessoires sont le moyen le plus simple de partager des données et des fonctions d'un composant parent vers un composant enfant. Ceci est particulièrement utile lorsque le parent doit contrôler certains comportements ou données dans le composant enfant.

Exemple : transmettre l'état et la fonction du parent à l'enfant

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;

Dans cet exemple :

• Le composant parent (ParentComponent) a un état de comptage et une fonction IncreaseCount.
• Ceux-ci sont transmis au composant enfant (ChildComponent) via des accessoires.
• Le composant enfant peut afficher et manipuler l'état du parent à l'aide de la fonction fournie.

2. Accéder aux fonctionnalités de l'enfant depuis le parent

Pour déclencher des fonctionnalités dans un composant enfant à partir du parent, nous pouvons utiliser refs et fonctions de rappel.

Utilisation de useRef avec forwardRef

En utilisant useRef avec React.forwardRef, le parent peut accéder directement aux fonctions enfants, offrant ainsi plus de contrôle sur le composant enfant.

Exemple : Appel de la fonction enfant depuis le parent

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;

Dans cet exemple :

• Nous utilisons React.forwardRef pour transmettre une référence du parent à l'enfant.
• Le composant enfant définit une fonction showAlert exposée au parent à l'aide de useImperativeHandle.
• Le parent peut alors appeler showAlert en accédant à childRef.

3. Accès à l'état parent et aux fonctions dans des composants profondément imbriqués

Dans les cas où les composants sont imbriqués sur plusieurs niveaux, faire passer les accessoires à travers chaque composant peut devenir fastidieux. Pour ces scénarios, l'API React Context fournit une solution en permettant le partage de l'état et des fonctions dans l'ensemble de l'arborescence des composants.

Utilisation de l'API de contexte React

Exemple : accès à l'état et à la fonction du parent dans un enfant profondément imbriqué

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;

Dans cet exemple :

• Nous utilisons createContext pour créer CountContext, qui contient les fonctions count et IncreaseCount.
• ParentComponent encapsule les composants imbriqués dans CountContext.Provider pour donner accès à l'état de comptage et à la fonction IncreaseCount.
• DeepChildComponent, qui peut être imbriqué sur plusieurs niveaux, peut facilement accéder à l'état de comptage et à la fonction IncreaseCount à l'aide de useContext.

4. Mise à jour de l'état parent à partir de l'enfant sans contexte

Si le composant enfant doit mettre à jour l'état du parent et que vous préférez ne pas utiliser l'API Context, vous pouvez transmettre une fonction de rappel du parent à l'enfant.

Exemple : mise à jour de l'état parent avec rappel de l'enfant

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;

Dans cet exemple :

• Le composant parent définit une fonction updateMessage pour modifier son état.
• Cette fonction est transmise en tant qu'accessoire au composant enfant.
• L'enfant peut appeler cette fonction pour mettre à jour l'état du message du parent.

Conclusion

React Native propose diverses méthodes pour faciliter la communication entre les composants parent et enfant. Selon vos besoins :

• Utilisez props pour un partage simple de données et de fonctions entre le parent immédiat et l'enfant.
• Utilisez refs avec forwardRef pour permettre aux composants parents d'appeler des fonctions enfants.
• L'API contextuelle est excellente pour partager des données entre des composants profondément imbriqués.
• Les fonctions de rappel offrent aux enfants un moyen direct de mettre à jour l'état parent sans avoir besoin d'un contexte global.

Ces méthodes, lorsqu'elles sont utilisées de manière appropriée, peuvent grandement améliorer votre capacité à gérer et organiser des hiérarchies de composants complexes dans React Native. Expérimentez avec chacun pour comprendre lequel correspond le mieux aux exigences de votre projet. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!