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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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