Reactで配列をpropsとして渡す：高階コンポーネント、Context API、Reduxを活用

2024-06-19

ReactJSでコンポーネント間で配列をpropsとして渡す方法

配列をpropsとして渡す手順

親コンポーネントで配列を定義する: 親コンポーネント内で、渡したい配列を定義します。配列は、JavaScriptの配列リテラルを用いて定義できます。

const parentComponent = () => {
  const dataArray = ['アイテム1', 'アイテム2', 'アイテム3'];
  return (
    <div>
      <ChildComponent data={dataArray} />
    </div>
  );
}

子コンポーネントでpropsとして受け取る: 子コンポーネントの引数として、propsオブジェクトを受け取ります。propsオブジェクトには、親コンポーネントから渡されたデータが格納されています。配列データは、props.dataのようにpropsオブジェクトのプロパティとしてアクセスできます。

const ChildComponent = (props) => {
  const dataList = props.data;
  return (
    <ul>
      {dataList.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

子コンポーネントで配列を処理する: 子コンポーネント内で、受け取った配列データを処理します。map関数などを利用して、配列の各要素に対して処理を行うことができます。

上記例では、map関数を使用して配列の各要素をli要素に変換し、リストとして表示しています。

その他のポイント

key属性の利用: リストレンダリングを行う際には、各要素にkey属性を設定することが重要です。key属性は、Reactが要素を効率的に管理するために使用します。配列の各要素に対して、その要素を一意に識別する値を設定します。

上記例では、各要素の値をkey属性に設定しています。

propsの型チェック: TypeScriptを使用している場合は、propsの型を定義することで、開発時の安全性とコードの可読性を向上させることができます。

interface ChildComponentProps {
  data: string[];
}

const ChildComponent: React.FC<ChildComponentProps> = (props) => {
  // ...
}

この例では、ChildComponentコンポーネントのpropsとして、dataという名前の配列を受け取ると定義しています。配列の要素はすべて文字列であることを保証します。

ReactJSでコンポーネント間で配列をpropsとして渡す方法は、上記のようにシンプルです。この基本的な仕組みを理解することで、様々なコンポーネント間でデータを共有し、複雑なアプリケーションを構築することができます。

上記以外にも、ReactJSで配列をpropsとして渡す際に役立つ様々な方法やテクニックがあります。詳しくは、以下の公式ドキュメントやチュートリアルを参照することをお勧めします。

ReactJS で配列を props として渡す：詳細なサンプルコード

ParentComponent.js

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const dataArray = ['アイテム1', 'アイテム2', 'アイテム3'];
  const filteredData = dataArray.filter((item) => item.length > 5);

  return (
    <div>
      <h2>親コンポーネント</h2>
      <p>元の配列: {dataArray.join(', ')}</p>
      <p>フィルター後の配列: {filteredData.join(', ')}</p>
      <ChildComponent data={dataArray} filteredData={filteredData} />
    </div>
  );
};

export default ParentComponent;

import React from 'react';

const ChildComponent = (props) => {
  const { data, filteredData } = props;

  return (
    <div>
      <h2>子コンポーネント</h2>
      <h3>props で受け取った元の配列</h3>
      <ul>
        {data.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <h3>props で受け取ったフィルター後の配列</h3>
      <ul>
        {filteredData.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ChildComponent;

App.js

import React from 'react';
import ParentComponent from './ParentComponent';

const App = () => {
  return (
    <div>
      <ParentComponent />
    </div>
  );
};

export default App;

説明

ParentComponent:
- dataArray という名前の配列を定義します。
- filter 関数を使用して、配列の要素のうち長さが 5 文字を超えるものだけを含む新しい配列 filteredData を作成します。
- ChildComponent コンポーネントをレンダリングし、data と filteredData を props として渡します。
ChildComponent:
- props オブジェクトを受け取り、data と filteredData を props から抽出します。
- data と filteredData をそれぞれリストとしてレンダリングします。

このサンプルコードでは、以下の点に注目してください。

親コンポーネントは、子コンポーネントに必要なデータを props として渡します。
子コンポーネントは、props から受け取ったデータを処理してレンダリングします。
key 属性を使用して、リストアイテムを一意に識別します。
filter 関数を使用して、配列をフィルタリングします。

このサンプルコードは、ReactJS でコンポーネント間で配列を props として渡す基本的な概念を示しています。実際のアプリケーションでは、より複雑なデータ構造や処理を行う必要が生じる場合もあります。

ReactJSで配列をpropsとして渡す方法：その他の方法

高階コンポーネントを使用する:

高階コンポーネントは、既存のコンポーネントをラップして、機能を追加したり、propsを操作したりするのに役立ちます。配列をpropsとして渡す場合、高階コンポーネントを使用して、配列を加工してから子コンポーネントに渡すことができます。

例：

const withFilteredData = (WrappedComponent) => {
  const filterData = (data) => data.filter((item) => item.length > 5);

  return (props) => {
    const filteredData = filterData(props.data);
    return <WrappedComponent {...props} filteredData={filteredData} />;
  };
};

const ParentComponent = () => {
  const dataArray = ['アイテム1', 'アイテム2', 'アイテム3'];
  return (
    <div>
      <ChildComponent data={dataArray} />
    </div>
  );
};

const ChildComponentWithFilteredData = withFilteredData(ChildComponent);

const App = () => {
  return (
    <div>
      <ParentComponent />
      <ChildComponentWithFilteredData />
    </div>
  );
};

この例では、withFilteredDataという高階コンポーネントを作成し、filterData関数を使用して配列をフィルタリングしています。その後、ChildComponentコンポーネントをラップして、filteredData propsを追加しています。

Context APIは、コンポーネントツリー全体で共有される状態を管理する仕組みです。配列をpropsとして渡す場合、Context APIを使用して、配列をグローバルな状態として保持し、必要なコンポーネントにアクセスできるようにすることができます。

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

const DataContext = createContext([]);

const ParentComponent = () => {
  const dataArray = ['アイテム1', 'アイテム2', 'アイテム3'];
  return (
    <DataContext.Provider value={dataArray}>
      <ChildComponent />
    </DataContext.Provider>
  );
};

const ChildComponent = () => {
  const data = useContext(DataContext);
  return (
    <ul>
      {data.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

const App = () => {
  return (
    <div>
      <ParentComponent />
    </div>
  );
};

この例では、DataContextというContextを作成し、dataArrayをその初期値として設定しています。ParentComponentは、DataContext.Providerを使用して、dataArrayをコンポーネントツリー全体に提供します。ChildComponentは、useContextフックを使用して、DataContextから配列データにアクセスします。

Reduxを使用する:

Reduxは、アプリケーションの状態を管理するためのライブラリです。配列をpropsとして渡す場合、Reduxを使用して、配列をストアに保存し、必要なコンポーネントに接続することができます。

import React from 'react';
import { connect } from 'react-redux';

const store = createStore({ dataArray: ['アイテム1', 'アイテム2', 'アイテム3'] });

const ChildComponent = (props) => {
  const data = props.data;
  return (
    <ul>
      {data.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

const ConnectedChildComponent = connect((state) => ({ data: state.dataArray }))(ChildComponent);

const ParentComponent = () => {
  return (
    <div>
      <ConnectedChildComponent />
    </div>
  );
};

const App = () => {
  return (
    <Provider store={store}>
      <ParentComponent />
    </Provider>
  );
};