在 React Native 中存取父子狀態和函數-js教程-PHP中文網

Accessing Parent and Child State & Functions in React Native

使用 React Native 時，建立可重複使用和模組化元件是很常見的。有時，我們需要子元件存取或修改父元件中的狀態和函數，反之亦然。父組件和子組件之間的這種通訊可以透過幾種不同的方式來實現。讓我們深入研究各種技術，以便更輕鬆地在 React Native 中的父元件和子元件之間共享狀態和功能。

1. 將狀態和函數從父級傳遞給子級

使用道具

Props 是從父元件到子元件共享資料和函數的最直接的方法。當父元件需要控制子元件中的某些行為或資料時，這特別有用。

範例：將父級狀態和函數傳遞給子級

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;

登入後複製

在此範例中：

父元件（ParentComponent）有計數狀態和incrementCount函數。
這些透過 props 傳遞給子元件（ChildComponent）。
子元件可以使用提供的函數顯示和操作父元件的狀態。

2. 從父級存取子級功能

要從父元件觸發子元件中的功能，我們可以使用 refs 和 回調函數。

將 useRef 與forwardRef 結合使用

使用 useRef 和 React.forwardRef，父元件可以直接存取子函數，從而提供更多子元件的控制。

範例：從父函數呼叫子函數

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;

登入後複製

在此範例中：

我們使用 React.forwardRef 將 ref 從父級傳遞給子級。
子元件定義了一個使用 useImperativeHandle 向父元件公開的 showAlert 函數。
然後父級可以透過存取 childRef 來呼叫 showAlert。

3. 存取深度巢狀元件中的父狀態和函數

在元件嵌套多層的情況下，透過每個元件向下傳遞 props 可能會變得很麻煩。對於這些場景，React Context API 提供了一個解決方案，允許在整個元件樹上共用狀態和函數。

使用 React 上下文 API

範例：存取深度巢狀子層級中的父級狀態與函數

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;

登入後複製

在此範例中：

我們使用createContext建立CountContext，它保存count和incrementCount函數。
ParentComponent 將巢狀元件包裝在 CountContext.Provider 內，以提供對計數狀態和incrementCount 函數的存取。
DeepChildComponent可能巢狀了幾層，可以使用useContext輕鬆存取計數狀態和incrementCount函數。

4. 在沒有上下文的情況下從子級更新父級狀態

如果子元件需要更新父元件的狀態，且您不想使用 Context API，則可以將回呼函數從父元件傳遞給子元件。

範例：使用子回呼更新父狀態

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;

登入後複製

在此範例中：