Reactで配列をpropsで渡す

ReactJSにおけるpropsとして配列を渡す

ReactJSでは、コンポーネント間でデータを共有するためにpropsを使用します。その中でも、配列をpropsとして渡すことは、複数の関連する値を効率的に管理する際に非常に便利です。

配列をpropsとして渡す方法

1. 親コンポーネントで配列を定義
   

   function ParentComponent() {
     const myArray = ['item1', 'item2', 'item3'];
   
     return (
       <ChildComponent myArray={myArray} />
     );
   }
   

2. function ChildComponent({ myArray }) {
     return (
       <ul>
         {myArray.map((item, index) => (
           <li key={index}>{item}</li>
         ))}
       </ul>
     );
   }
   

• データの更新
  親コンポーネントで配列を更新すると、子コンポーネントも自動的に更新されます。
• データの再利用
  配列をpropsとして渡すことで、同じデータを使用する複数のコンポーネントでコードを再利用できます。

注意事項

• 配列の変更
  配列の要素を追加、削除、または変更する場合は、新しい配列を作成してpropsとして渡す必要があります。
• キーの指定
  配列内の要素をレンダリングする際に、key属性を指定することでReactが効率的に更新を行うことができます。

例

function ParentComponent() {
  const fruits = ['apple', 'banana', 'orange'];

  return (
    <FruitList fruits={fruits} />
  );
}

function FruitList({ fruits }) {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

Reactで配列をpropsで渡す: 例

親コンポーネントから子コンポーネントに配列を渡す

function ParentComponent() {
  const fruits = ['apple', 'banana', 'orange'];

  return (
    <FruitList fruits={fruits} />
  );
}

• ParentComponentは、FruitListコンポーネントを呼び出し、fruits配列をfruitsという名前のpropsとして渡しています。
• ParentComponentは、fruitsという配列を定義しています。

function FruitList({ fruits }) {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

• key属性は、Reactがリストの要素を効率的に更新するために必要です。
• FruitListコンポーネントは、fruits配列の各要素をリストアイテムとして表示しています。
• FruitListコンポーネントは、fruitsという名前のpropsを受け取っています。

動作

1. ParentComponentがレンダリングされると、fruits配列が定義されます。
2. FruitListコンポーネントがレンダリングされ、fruits配列を受け取ります。

理解ポイント

• propsの受け渡し
  親コンポーネントから子コンポーネントにデータを渡すためにpropsを使用します。

Context API

• 配列の共有
  配列をContextの値として設定し、必要なコンポーネントで消費することができます。
• グローバルな状態管理
  Context APIを使用すると、コンポーネントツリー全体でデータを共有することができます。

import React, { createContext, useContext } from 'react';

const MyContext = createContext();

function ParentComponent() {
  const fruits = ['apple', 'banana', 'orange'];

  return (
    <MyContext.Provider value={fruits}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const fruits = useContext(MyContext);

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

Redux

• 配列の管理
  配列をReduxのストアに保存し、必要なコンポーネントでアクセスすることができます。
• 状態管理ライブラリ
  Reduxは、アプリケーションの状態を管理するための強力なライブラリです。

import React, { useState } from 'react';
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

   const initialState = {
  fruits: ['apple', 'banana', 'orange']
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_FRUIT':
      return { ...state, fruits: [...state.fruits, action.pay   load] };
    default:
      return state;
  }
}

const store = createStore(reducer);

function ParentComponent() {
  return (
    <Provider store={store}>
      <ChildComponent />
    </Provider>
  );
}

function ChildComponent() {
  const fruits = useSelector(state => state.fruits);

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

Custom Hooks

• 配列の共有
  カスタムフックを複数のコンポーネントで呼び出し、配列を共有することができます。
• 再利用可能なロジック
  カスタムフックを使用して、配列の管理や更新に関するロジックをカプセル化することができます。

import { useState } from 'react';

function useFruits() {
  const [fruits, setFruits] = useState(['apple', 'banana', 'orange']);

  return [fruits, setFruits];
}

function ParentComponent() {
  const [fruits, setFruits] = useFruits();

  return (
    <ChildComponent fruits={fruits} setFruits={setFruits} />
  );
}

function ChildComponent({ fruits, setFruits }) {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}