你知道吗？在 React（JSX）中可以使用 switch 语句。本文将讲解如何使用 switch 语句来超越三目运算符，在 React 中进行条件渲染。

在最近的一个项目中，我需要进行条件渲染，超越了三目运算符提供的二元选项。通常情况下，二元选项可以正常工作。例如，显示一个表单，然后在提交后显示一个感谢消息。然而，我需要根据状态条件性地渲染 4 个组件以包含一些游戏流程逻辑。我很快就意识到 React 不喜欢 JSX 中的 if-else 语句。原因在这里解释：https://react-cn.github.io/react/tips/if-else-in-JSX.html。

if-else 语句不适用于 JSX。这是因为 JSX 只是函数调用和对象构造的语法糖。

其次，如果我在逻辑块中包含了 4 个组件，并使用 if (state.value === 'value1') else if (state.value === 'value2') else if (state.value === 'value3') else …，那么这就开始变得笨重和难以跟踪。就像在 React 应用程序中的原始 JavaScript 一样，你可以在其中包含 Switch 语句以清理你的代码。此外，你可以将 Switch 语句放在 JSX 中。你需要做的就是将其包装在一个自我调用函数中，也称为立即调用的函数表达式（IIFE）中。你可以在这里阅读更多关于它的信息：https://developer.mozilla.org/en-US/docs/Glossary/IIFE。

如何将 Switch 语句纳入你的 React 项目

现在我们已经回答了“为什么”，我们将深入研究如何将 Switch 语句纳入演示 React 项目中。对于这个演示，我们将构建一个游戏的基本结构。但与实际游戏不同的是，我们所有的状态更改都是通过点击事件来调用的。此外，请注意，如果它与你以前看到的不同，这个演示是以 React 的函数格式编写的，而不是基于类的格式。

在项目文件夹中的终端中键入：

npx create-react-app react-switch-demo

这将构建出我们的骨架 React 应用程序。接下来，我们需要创建一些组件，我们将有条件地在 App.js 文件中渲染它们。在同一个终端窗口中键入：

cd react-switch-demo
mkdir src/components
touch src/components/Start.js src/components/Playing.js src/components/Lost.js src/components/Won.js

现在，我们已经建立了文件结构。所以我们可以打开文本编辑器中的 App.js 并编辑文件的顶部部分以导入 useState 和我们所有的组件。

接下来，让我们修改 App() 函数。当你生成你的 React 应用程序时，会有一些默认代码。请删除它们。此时，你应该拥有以下内容。我们正在设置我们的 useState 和 handleClick() 来处理点击事件。在 handleClick() 中，我们将 setState() 为 game。

好的，现在在 <div className="App"> 中添加一个小的全局标题和我们的 Switch 语句。

让我们分解一下在 Switch 语句中发生了什么。在第 7 行，声明了条件变量。对于我们来说，那就是我们为 State game 声明的常量。因此，它运行通过情况，并询问 game === 'start'，game === 'playing' 等。如果 game 等于其中之一，它将渲染该组件，否则将返回 null。此外，default: 是 Switch 语句正确工作所必需的。

在 GitHub Gist 的第 6 行和第 19 行，你可能会问自己，这些括号是什么意思？那是为了使一个自我调用函数的格式化，前面提到了这是一个要求，如果你选择在 JSX 中使用 Switch 语句。

因此，完整的 App.js 文件应该是这样的：

import React, { useState } from 'react';
import './App.css';
import Start from './components/Start';
import Playing from './components/Playing';
import Won from './components/Won';
import Lost from './components/Lost';

function App() {
  const [game, setGame] = useState('start');
  const handleClick = (e) => {
    e.preventDefault();
    if (game === 'start') setGame('playing');
    if (game === 'playing') setGame('won');
    if (game === 'won') setGame('start');
    if (game === 'lost') setGame('start');
  };

  return (
    <div className="App">
      <h1>React Switch Demo</h1>
      {(() => {
        switch (game) {
          case 'start':
            return <Start handleClick={handleClick} />;
          case 'playing':
            return <Playing handleClick={handleClick} />;
          case 'won':
            return <Won handleClick={handleClick} />;
          case 'lost':
            return <Lost handleClick={handleClick} />;
          default:
            return null;
        }
      })()}
    </div>
  );
}

export default App;

所以，为了使这个演示实际工作，我们需要构建组件，因为它们目前是空文件。虽然我们不会在它们中添加太多内容，因为我们需要渲染一些东西以证明概念，所以它们只包含一个标题和一个或多个按钮，这些按钮具有 onClick() 的事件监听器，调用传递下来的函数 handleClick()，它将 setState() 为 game。

只需将代码复制并粘贴到正确的文件中：

// Lost.js
import React from 'react';

function Lost(props) {
  return (
    <div>
      <h1>You Lost!</h1>
      <button onClick={props.handleClick}>Try Again?</button>
    </div>
  );
}

export default Lost;

// Playing.js
import React from 'react';

function Playing(props) {
  return (
    <div>
      <h1>Playing</h1>
      <button onClick={props.handleClick}>Win?</button>
      <button onClick={() => props.handleClick}>Lose?</button>
    </div>
  );
}

export default Playing;

// Start.js
import React from 'react';

function Start(props) {
  return (
    <div>
      <h1>Start</h1>
      <button onClick={props.handleClick}>Start Game</button>
    </div>
  );
}

export default Start;

// Won.js
import React from 'react';

function Won(props) {
  return (
    <div>
      <h1>You Won!</h1>
      <button onClick={props.handleClick}>Play Again?</button>
    </div>
  );
}

export default Won;

太棒了，这就是编码的全部内容。保存所有内容并将终端指向你的 React 应用程序的根目录，然后输入以下命令。

npm start

现在，你应该有一个功能性的 Switch 语句演示。

最后，这就是你如何将 Switch 语句纳入 React。Switch 语句允许有条件地渲染超出布尔值的内容。它们在需要有 3 个或更多组件有条件地渲染，而只同时显示其中 1 个组件时最为有益。