在React中实现条件渲染的7种方法

借助React，我们可以构建动态且高度交互的单页应用程序，充分利用这种交互性的一种方法是通过条件渲染。

条件渲染一词描述了根据某些条件渲染不同UI标签的能力。在React文档中，这是一种根据条件渲染不同元素或组件的方法。此概念通常被应用到如下情况中：

• 从API渲染外部数据
• 显示/隐藏元素
• 切换应用程序功能
• 实现权限级别
• 认证与授权

在本文中，我们将研究在React应用程序中实现条件渲染的7种方法。

挑战

首先，根据在组件state中isLoggedIn的值，我们希望能够在用户未登入时显示Login按钮，在用户登入时显示Logout按钮。

下图是我们初始组件的截图：

代码如下：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: true
    };
  }
  render() {
    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional Rendering in React.
        </h1>
        <button>Login</button>
        <button>Logout</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在线测试：CodeSandBox

解决方法

在代码段中，…表示某些与所解释要点没有直接联系的代码。

1. 使用if…else语句

使用if…else语句允许我们可以指出，如果条件为true，则执行特定的操作，否则将执行其他操作。使用示例，我将测试if…else通常用于在React中条件渲染的两种方法。

• 将条件渲染提取到函数中

在JSX中，我们可以将JS代码和HTML标签放在一起，以确保程序内具有惊人的交互性。为此，我们使用大括号{}并在其中编写我们的JS。但在括号内能做事情也是有限的。例如，下面代码的结果并不能实现我们想要的结果。

// index.js
...
render() {
  let {isLoggedIn} = this.state;
  return (
    <div className="App">
      <h1>
        This is a Demo showing several ways to implement Conditional Rendering in React.
      </h1>
      {
        i