如何使用 ReactJS 实现切换？

使用 ReactJS 实现切换可以使用条件渲染或者路由的方式来完成。下面分别介绍两种方法的实现。

条件渲染

条件渲染用于根据不同的状态去渲染不同的组件或元素。通常我们会使用 if else 或者三元表达式来实现条件渲染。

if else

import React, { useState } from 'react';

function Switch() {
  const [status, setStatus] = useState(true);

  const handleClick = () => {
    setStatus(!status);
  };

  if (status) {
    return <div onClick={handleClick}>Switch on</div>
  } else {
    return <div onClick={handleClick}>Switch off</div>
  }
}

在上面的代码中，我们使用 useState 来声明一个状态 status，并且定义了一个处理点击事件的函数 handleClick。然后通过 if else 来根据状态渲染不同的组件，最后需要将处理点击事件的函数绑定到对应的组件上。

三元表达式

import React, { useState } from 'react';

function Switch() {
  const [status, setStatus] = useState(true);

  const handleClick = () => {
    setStatus(!status);
  };

  return (
    <div onClick={handleClick}>
      {status ? <p>Switch on</p> : <p>Switch off</p>}
    </div>
  );
}

在上面的代码中，我们采用了三元表达式来实现不同状态下的渲染。首先我们依然定义了状态和处理点击事件的函数，然后在 return 中根据状态使用三元表达式来渲染不同的组件。

路由

路由是实现切换的常用方法，通过路由我们可以根据不同的路径渲染不同的组件。下面是采用 react-router-dom 实现路由切换的示例代码。

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Switch() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

在上面的代码中，我们引入了 react-router-dom 库并且定义了两个组件 Home 和 About，然后我们采用 BrowserRouter 来定义路由。使用 Link 组件来定义导航栏链接，Switch 来定义路由匹配规则。最后在路由内部根据不同的路径渲染对应的组件。