Reactのコンポーネントプロップス

前のレッスンでは、いくつかの商品インスタンスを表示しました:

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

現状では、商品タグの各呼び出しは同じものを画面に表示しています。それぞれの商品をユニークなものにしてみましょう。

例えば、各商品は名前と価格を持つものとします。商品タグの各呼び出しが、それぞれ固有の名前と価格を持つ商品を、指定したレイアウトで表示するようにします。

そのためには、いくつかのステップを踏む必要があります。

まず、商品タグを呼び出す際に、2つの属性をそのタグに記述します: 商品名の属性 name と、価格の属性 cost です。次のように:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

これらの属性の名前と値は、コンポーネント Product の関数コンストラクタの最初のパラメータにオブジェクトとして渡されます:

function Product(props) {
	console.log(props); // nameとcostをキーとするオブジェクト
	
	return <p>
		product
	</p>;
}

パラメータ名は任意ですが、Reactでは通常 props と名付けられます。これは単なるパラメータ名ではなく、Reactの重要なコンセプトです。

このコンセプトの本質は次の通りです: コンポーネントタグを呼び出す際、そのタグにデータを含む属性を記述できます。このデータはコンポーネントのプロップスに渡されます。その後、コンポーネントは例えば必要なレイアウトを作成するために、このデータを利用できます。

実際にやってみましょう:

function Product(props) {
	return <p>
		name: <span>{props.name}</span>,
		cost: <span>{props.cost}</span>
	</p>;
}

propsオブジェクトを直接使用するよりも、関数のパラメータ内ですぐに分割代入を行う方がより便利で、一般的にもよく行われます:

function Product({ name, cost }) {
	return <p>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</p>;
}

従業員のデータを画面に表示するコンポーネント Employee を作成してください。データは姓、名、父称、および給与とします。これらのデータを任意のレイアウトで整形してください。コンポーネント App 内で、異なるデータを持つ3人の従業員を表示してください。