Reactでpropsを介して引数を渡す方法

単純な引数の渡し方: コンポーネントAからコンポーネントBに引数を渡す場合、以下のようにpropsを使用します。

コンポーネントA:

import React from 'react';
import ComponentB from './ComponentB';
const ComponentA = () => {
  const argument = 'Hello, World!';

  return (
    <ComponentB argument={argument} />
  );
};
export default ComponentA;

コンポーネントB:

import React from 'react';
const ComponentB = (props) => {
  return <div>{props.argument}</div>;
};
export default ComponentB;

複数の引数の渡し方: 複数の引数を渡す場合は、propsオブジェクトを使用して渡すことができます。

コンポーネントA:

import React from 'react';
import ComponentB from './ComponentB';
const ComponentA = () => {
  const argument1 = 'Hello';
  const argument2 = 'World';

  return (
    <ComponentB argument1={argument1} argument2={argument2} />
  );
};
export default ComponentA;

コンポーネントB:

import React from 'react';
const ComponentB = (props) => {
  return (
    <div>
      {props.argument1}, {props.argument2}!
    </div>
  );
};
export default ComponentB;

コンポーネント内での引数の使用: コンポーネント内で受け取った引数を使用する場合は、propsを介して受け取った引数を変数として使用できます。

コンポーネントA:

import React from 'react';
import ComponentB from './ComponentB';
const ComponentA = () => {
  const argument = 'Hello, World!';

  return (
    <ComponentB argument={argument} />
  );
};
export default ComponentA;

コンポーネントB:

import React from 'react';
const ComponentB = (props) => {
  const message = `Message: ${props.argument}`;

  return <div>{message}</div>;
};
export default ComponentB;

これらは、Reactでpropsを介して引数を渡すいくつかの一般的な方法です。必要に応じて、値のバリデーションやデフォルト値の設定など、さまざまな機能をpropsに追加することもできます。詳細については、Reactの公式ドキュメントを参照してください。