Propsで関数を渡す方法：Reactで実装する基本と応用

Reactでコンポーネント間のデータや機能をやり取りする際、propsを使用して関数を渡すことは非常に重要なテクニックです。関数をpropsとして子コンポーネントに渡すことで、親から子へだけでなく、子から親へデータやアクションを「バブルアップ」することが可能となります。これによって、動的でインタラクティブなWebアプリケーションが簡単に実現できるようになります。

この記事では、Reactの基礎的な構造から、関数を渡す方法やその利点、注意点について解説し、初心者でもわかりやすいように具体例を交えながら学んでいきます。

なぜ関数をPropsで渡すのか？
1. 状態の一元管理と関数の役割
Propsで関数を渡す方法
1. 親コンポーネントで関数を定義し、子コンポーネントに渡す
2. 子コンポーネントで関数を受け取り表示する
応用例：関数に引数を渡す
まとめ

なぜ関数をPropsで渡すのか？

Reactアプリケーションでは、通常コンポーネント間でデータを受け渡しする際には親から子にpropsを通じて行います。しかし、コンポーネントの分離や再利用性を高めるため、状態（state）はできるだけ上位のコンポーネントに保管して、必要に応じて下位のコンポーネントに渡します。

状態の一元管理と関数の役割

例えば、ボタンをクリックした際に親コンポーネントの状態を更新したい場合、ボタンコンポーネントにイベントハンドラを直接埋め込むのではなく、関数をpropsとして子コンポーネントに渡します。子コンポーネント内でその関数を呼び出すことで、親コンポーネントにあるstateが更新され、画面が再レンダリングされるような構造が実現します。

Propsで関数を渡す方法

それでは、具体的にpropsで関数を渡す方法を見てみましょう。

親コンポーネントで関数を定義し、子コンポーネントに渡す

App.js

import React, { useState } from 'react';
import Hello from './Hello';

function App() {
    const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>クリック数: {count}</h1>
      <Hello onButtonClick={handleIncrement} />
    </div>
  );
}

export default App;

ゆーや

まず、Appコンポーネントの中にボタンのクリック数を管理するcountという状態を持たせます。そして、この状態を増加させる関数handleIncrementを定義し、子コンポーネントにpropsとして渡します。

ゆーや

useStateについて、知りたい方は次の記事に詳しくまとめました！

ぜひご覧ください！

※現在、執筆中

子コンポーネントで関数を受け取り表示する

次に、Helloでpropsとして渡されたonButtonClick関数を使ってボタンをクリックした時の動作を定義します。

Hello.js

import React from 'react';

function Hello({ onButtonClick  }) {
    return (
        <button onClick={onButtonClick}>クリックして増加</button>
      );
}

export default Hello;

ゆーや

このコードでは、ボタンがクリックされると、App内のcountが1ずつ増えていきます。これにより、親コンポーネントで定義したstateを子コンポーネントから操作することができるようになります。

応用例：関数に引数を渡す

場合によっては、関数に引数を渡す必要があることもあります。たとえば、複数の異なるボタンがあり、それぞれ異なる値を渡して処理を行いたい場合です。以下のコード例では、引数を使用して特定の数値で状態を更新する方法を示します。

App.js

import React, { useState } from 'react';
import Hello from './Hello';

function App() {
    const [count, setCount] = useState(0);

    const handleIncrement = (incrementValue) => {
        setCount(count + incrementValue);
    };

  return (
    <div>
        <h1>カウント: {count}</h1>
      <Hello onButtonClick={() => handleIncrement(1)} label="1増加" />
      <Hello onButtonClick={() => handleIncrement(5)} label="5増加" />
    </div>
  );
}

export default App;

ゆーや

子コンポーネントに渡す際に「()=>hanleIncrement(1)」という形（アロー関数）で渡すことを忘れずに！

Hello.js

import React from 'react';

function Hello({ onButtonClick, label }) {
    return (
        <button onClick={onButtonClick}>{label}</button>
      );
}

export default Hello;