Mengakses Keadaan & Fungsi Ibu Bapa dan Anak dalam React Native

Apabila bekerja dengan React Native, adalah perkara biasa untuk membina komponen boleh guna semula dan modular. Kadangkala, kita memerlukan komponen anak untuk mengakses atau mengubah suai keadaan dan fungsi dalam komponen induk, dan sebaliknya. Komunikasi antara komponen ibu bapa dan anak ini boleh dicapai dalam beberapa cara yang berbeza. Mari selami pelbagai teknik yang memudahkan untuk berkongsi keadaan dan kefungsian antara komponen ibu bapa dan anak dalam React Native.

---

1. Melepasi Negeri dan Fungsi daripada Ibu Bapa kepada Anak

Menggunakan Props

Props ialah cara paling mudah untuk berkongsi data dan fungsi daripada ibu bapa kepada komponen anak. Ini amat berguna apabila ibu bapa perlu mengawal beberapa gelagat atau data dalam komponen anak.

Contoh: Mewariskan Keadaan Induk dan Fungsi kepada Anak

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;

Dalam contoh ini:

• Komponen induk (ParentComponent) mempunyai keadaan kiraan dan fungsi IncrementCount.
• Ini diturunkan kepada komponen kanak-kanak (ChildComponent) melalui prop.
• Komponen anak boleh memaparkan dan memanipulasi keadaan ibu bapa menggunakan fungsi yang disediakan.

---

2. Mengakses Kefungsian Anak daripada Ibu Bapa

Untuk mencetuskan kefungsian dalam komponen anak daripada induk, kita boleh menggunakan refs dan fungsi panggil balik.

Menggunakan useRef dengan forwardRef

Menggunakan useRef bersama-sama dengan React.forwardRef, ibu bapa boleh mengakses terus fungsi anak, memberikan lebih kawalan ke atas komponen anak.

Contoh: Memanggil Fungsi Anak daripada Ibu Bapa

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;

Dalam contoh ini:

• Kami menggunakan React.forwardRef untuk menyampaikan rujukan daripada ibu bapa kepada anak.
• Komponen anak mentakrifkan fungsi showAlert yang terdedah kepada induk menggunakan useImperativeHandle.
• Ibu bapa kemudiannya boleh memanggil showAlert dengan mengakses childRef.

---

3. Mengakses Keadaan Induk dan Fungsi dalam Komponen Bersarang Dalam

Dalam kes di mana komponen bersarang berbilang peringkat dalam, menghantar prop ke bawah melalui setiap komponen boleh menjadi menyusahkan. Untuk senario ini, React Context API menyediakan penyelesaian dengan membenarkan keadaan dan fungsi dikongsi merentas keseluruhan pepohon komponen.

Menggunakan API Konteks React

Contoh: Mengakses Keadaan Induk dan Fungsi dalam Anak Bersarang Dalam

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;

Dalam contoh ini:

• Kami menggunakan createContext untuk mencipta CountContext, yang memegang fungsi count dan incrementCount.
• ParentComponent membungkus komponen bersarang di dalam CountContext.Provider untuk menyediakan akses kepada keadaan kiraan dan fungsi IncrementCount.
• DeepChildComponent, yang mungkin bersarang beberapa tahap dalam, boleh mengakses keadaan kiraan dan fungsi IncrementCount menggunakan useContext.

---

4. Mengemas kini Keadaan Induk daripada Anak tanpa Konteks

Jika komponen anak perlu mengemas kini keadaan ibu bapa dan anda memilih untuk tidak menggunakan API Konteks, anda boleh menghantar fungsi panggil balik daripada ibu bapa kepada anak.

Contoh: Mengemas kini Keadaan Induk dengan Panggil Balik Anak

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;

Dalam contoh ini:

• Komponen induk mentakrifkan mesej kemas kini fungsi untuk mengubah suai keadaannya.
• Fungsi ini diluluskan sebagai prop kepada komponen anak.
• Kanak-kanak boleh memanggil fungsi ini untuk mengemas kini keadaan mesej ibu bapa.

---

Kesimpulan

React Native menawarkan pelbagai kaedah untuk memudahkan komunikasi antara komponen ibu bapa dan anak. Bergantung pada keperluan anda:

• Gunakan props untuk perkongsian data dan fungsi mudah antara ibu bapa dan anak terdekat.
• Gunakan ref dengan forwardRef untuk membenarkan komponen induk memanggil fungsi anak.
• API Konteks sangat baik untuk berkongsi data merentas komponen bersarang dalam.
• Fungsi panggil balik menyediakan cara terus untuk kanak-kanak mengemas kini keadaan ibu bapa tanpa memerlukan konteks global.

Kaedah ini, apabila digunakan dengan sewajarnya, boleh meningkatkan keupayaan anda untuk mengurus dan menyusun hierarki komponen yang kompleks dalam React Native. Eksperimen dengan setiap satu untuk memahami yang paling sesuai dengan keperluan projek anda. Selamat mengekod!

Atas ialah kandungan terperinci Mengakses Keadaan & Fungsi Ibu Bapa dan Anak dalam React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!