問題一覧に戻る
初級コンポーネント
問題18: コンポーネントの合成

小さなコンポーネントを組み合わせて、より大きなコンポーネントを作る方法を学びます。これによりコードの再利用性が向上します。

// アイコンコンポーネント
function Icon({ name }) {
  return <span>🔹 {name}</span>;
}

// バッジコンポーネント
function Badge({ text, color }) {
  return (
    <span style={{ color }}>
      [{text}]
    </span>
  );
}

// リストアイテムコンポーネント
function ListItem({ icon, title,  }) {
  return (
    <div>
      {/* コンポーネントを組み合わせる */}
      < name={icon} />
      <strong>{title}</strong>
      < text={badge} color="blue" />
    </div>
  );
}

function App() {
  return (
    <div>
      <ListItem 
        icon="📧"
        title="メール"
        ="新着"
      />
      <ListItem 
        icon="📅"
        title="カレンダー"
        ="3件"
      />
    </div>
  );
}

export default App;
···