問題一覧に戻る
初級Props
問題15: デフォルトProps

デフォルト値を設定することで、propsが渡されなかった場合の動作を定義できます。これによりコンポーネントの柔軟性が向上します。

// propsのデフォルト値を設定
function Button({ text  "Click", color  "blue" }) {
  return (
    <button className={`btn-${color}`}>
      {text}
    </button>
  );
}

function App() {
  return (
    <div>
      {/* 全てのpropsを指定 */}
      <Button text="送信" color="green" />
      
      {/* 一部のpropsを指定（colorはデフォルト） */}
      <Button text="キャンセル" />
      
      {/* propsなし（全てデフォルト値） */}
      <Button />
    </div>
  );
}

export default App;
···