ホームページ >ウェブフロントエンド >jsチュートリアル >React Native での親と子の状態と関数へのアクセス

React Native での親と子の状態と関数へのアクセス

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-12 18:35:02377ブラウズ

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コールバック関数 を使用できます。

forwardRef での useRef の使用

React.forwardRef とともに useRef を使用すると、親は子関数に直接アクセスでき、子コンポーネントをより詳細に制御できます。

例: 親からの子関数の呼び出し

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;

この例では:

  • 親コンポーネントは、その状態を変更する関数 updateMessage を定義します。
  • この関数は prop として子コンポーネントに渡されます。
  • 子はこの関数を呼び出して、親のメッセージ状態を更新できます。

結論

React Native は、親コンポーネントと子コンポーネント間の通信を容易にするさまざまなメソッドを提供します。ニーズに応じて:

  • 直接の親と子の間で単純なデータと関数を共有するには、props を使用します。
  • refs を forwardRef とともに使用して、親コンポーネントが子関数を呼び出せるようにします。
  • Context API は、深くネストされたコンポーネント間でデータを共有するのに優れています。
  • コールバック関数は、グローバル コンテキストを必要とせずに、子が親の状態を更新する直接的な方法を提供します。

これらのメソッドを適切に使用すると、React Native で複雑なコンポーネント階層を管理および整理する能力が大幅に向上します。それぞれを試して、どれがプロジェクトの要件に最も適しているかを理解してください。コーディングを楽しんでください!

以上がReact Native での親と子の状態と関数へのアクセスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。