ReactコンポーネントでのSwitchの使用方法と例

単純なSwitch文の例: Switch文は、条件に基づいて異なるコンポーネントを表示するために使用されます。以下は、Switch文を使用して異なるコンポーネントを表示する例です。

import React from 'react';
function MyComponent({ value }) {
  switch (value) {
    case 'A':
      return <ComponentA />;
    case 'B':
      return <ComponentB />;
    case 'C':
      return <ComponentC />;
    default:
      return <DefaultComponent />;
  }
}
function ComponentA() {
  return <div>Component A</div>;
}
function ComponentB() {
  return <div>Component B</div>;
}
function ComponentC() {
  return <div>Component C</div>;
}
function DefaultComponent() {
  return <div>Default Component</div>;
}

上記の例では、MyComponentはvalueプロパティに基づいて異なるコンポーネントを表示します。valueの値に応じて、ComponentA、ComponentB、ComponentC、またはDefaultComponentのいずれかが表示されます。

Switch文の条件に基づくスタイリング: Switch文を使用すると、条件に基づいたスタイリングも行うことができます。以下は、条件に基づいて異なるスタイルを適用する例です。

import React from 'react';
function MyComponent({ value }) {
  let componentStyle;
  switch (value) {
    case 'A':
      componentStyle = {
        backgroundColor: 'red',
        color: 'white',
      };
      break;
    case 'B':
      componentStyle = {
        backgroundColor: 'blue',
        color: 'white',
      };
      break;
    case 'C':
      componentStyle = {
        backgroundColor: 'green',
        color: 'white',
      };
      break;
    default:
      componentStyle = {
        backgroundColor: 'gray',
        color: 'black',
      };
      break;
  }
  return <div style={componentStyle}>Hello, World!</div>;
}

上記の例では、MyComponentはvalueプロパティに基づいて異なる背景色とテキスト色を持つコンポーネントを表示します。

上記の例を参考にして、ReactコンポーネントでSwitch文を使用する方法と例を理解しました。