propsの使い方

propsは、親コンポーネントから子コンポーネントにデータを渡すための仕組みです。文字列、数値、オブジェクト、配列など、任意のデータを渡すことができます。

受け取ったデータに対して処理をするようにコンポーネントを作っておけば、似たようなコンポーネントを量産せずにすみます。コンポーネントを再利用しやすく管理できるようになります。

propsの使用例

次の例は、親コンポーネントから子コンポーネントにpropsを渡して、子コンポーネントでその内容を表示させる例です。

別のコンポーネントに値を渡す書き方

// 親コンポーネント
const ParentComponent = () => {
	return (
		<div>
			<ChildComponent name="ちゃろぼ" age="20" />
		</div>
	);
};

別のコンポーネントから値を受け取る書き方

// 子コンポーネント
const ChildComponent = ({ name, age }) => {
	return (
		<div>
			<h1>私の名前は {name} です。</h1>
			<p>年齢は {age} 歳です。</p>
		</div>
	);
};

実際のJSXソースコード

import React from "react";
import ReactDOM from "react-dom";

// 親コンポーネント
const ParentComponent = () => {
	return (
		<div>
			<ChildComponent name="ちゃろぼ" age="20" />
		</div>
	);
};

// 子コンポーネント
const ChildComponent = ({ name, age }) => {
	return (
		<div>
			<h1>私の名前は {name} です。</h1>
			<p>年齢は {age} 歳です。</p>
		</div>
	);
};

ReactDOM.render(
	<ParentComponent />,
	document.getElementById('root')
);

実際にできあがるHTML

このコードを実行すると、次のようなHTMLになります。

<div>
	<h1>私の名前は ちゃろぼ です。</h1>
	<p>年齢は 20 歳です。</p>
</div>