問題一覧に戻る
初級Props
問題13: Props分割代入

Props分割代入を使用すると、コンポーネントのコードがより簡潔になります。props.nameの代わりにnameとして直接アクセスできるようになります。

// propsを分割代入で受け取る
function ProductCard( , ,  ) {
  return (
    <div>
      {/* 分割代入した変数を直接使用 */}
      <h3>{}</h3>
      <p>${}</p>
      <p>在庫: {}</p>
    </div>
  );
}

function App() {
  return (
    <ProductCard 
      name="ノートPC"
      price={1200}
      stock={5}
    />
  );
}

export default App;
···