JSX 中的 switch case - JavaScript

在 JSX 中，我们经常需要根据某些条件渲染不同的内容。这时候，使用 switch case 语句就会非常方便。

switch case 语句

switch case 语句用于匹配某个值，并根据不同的匹配结果执行不同的代码块。语法如下：

switch(expression) {
  case value1:
    // 执行代码块 1
    break;
  case value2:
    // 执行代码块 2
    break;
  // 可以有多个 case
  default:
    // 执行默认代码块
}

其中，expression 表示要匹配的值；value1、value2 等表示不同的匹配结果；break 用于结束代码块的执行；default 用于匹配所有未被其他 case 匹配到的情况。

在 JSX 中使用 switch case

在 JSX 中，我们可以使用 switch case 语句来根据不同的条件渲染不同的组件。以下是一个示例：

function Display(props) {
  const { type, text } = props;

  switch(type) {
    case 'success':
      return <SuccessMessage text={text} />;
    case 'warning':
      return <WarningMessage text={text} />;
    case 'error':
      return <ErrorMessage text={text} />;
    default:
      return null; // 如果没有匹配到任何值，返回 null
  }
}

function App() {
  return (
    <div>
      <Display type="success" text="操作成功" />
      <Display type="warning" text="警告：操作存在风险" />
      <Display type="error" text="操作失败，请稍后再试" />
    </div>
  );
}

在上面的示例中，Display 组件根据传入的 type 属性渲染不同的提示组件，如果没有匹配到任何值，则返回 null。App 组件则使用 Display 组件来展示不同类型的提示信息。

结语

使用 switch case 语句可以让我们更方便地根据不同的条件渲染不同的组件，让代码更加简洁、易于阅读。