18 条件渲染之if语句的使用

在 React 中，条件渲染是一种常见的需求。当我们需要根据某些条件来决定渲染不同的内容时，if 语句便是一个非常有效的工具。在本章中，我们将学习如何使用 if 语句进行条件渲染，同时结合实际案例进行说明。

何时使用 if 语句

在 React 组件中，使用 if 语句的主要场景是根据状态或属性（props）判断要渲染的内容。例如，你可能会根据用户的登录状态来显示不同的内容。

基本用法

import React from 'react';

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoggedIn: false };
  }

  handleLogin = () => {
    this.setState({ isLoggedIn: true });
  };

  handleLogout = () => {
    this.setState({ isLoggedIn: false });
  };

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    if (isLoggedIn) {
      return (
        <div>
          <h1>欢迎回来!</h1>
          <button onClick={this.handleLogout}>登出</button>
        </div>
      );
    } else {
      return (
        <div>
          <h1>请登录.</h1>
          <button onClick={this.handleLogin}>登录</button>
        </div>
      );
    }
  }
}

export default LoginControl;

在上面的例子中，我们创建了一个 LoginControl 组件。它使用 if 语句来检查用户是否已登录（isLoggedIn），并根据这个状态渲染不同的内容。如果用户已登录，则显示欢迎信息和登出按钮；如果未登录，则显示登录提示和登录按钮。

使用函数封装条件渲染

为了保持代码的整洁性，我们还可以将条件渲染的逻辑封装成一个函数。这有助于提高可读性，并减少 render() 方法的复杂性。

class LoginControl extends React.Component {
  // ...构造函数和状态定义...

  renderGreeting() {
    if (this.state.isLoggedIn) {
      return <h1>欢迎回来!</h1>;
    } else {
      return <h1>请登录.</h1>;
    }
  }

  render() {
    return (
      <div>
        {this.renderGreeting()}
        <button onClick={this.state.isLoggedIn ? this.handleLogout : this.handleLogin}>
          {this.state.isLoggedIn ? '登出' : '登录'}
        </button>
      </div>
    );
  }
}

在这个改进的版本中，我们定义了一个名为 renderGreeting 的函数用于处理 isLoggedIn 状态的判断。这样，我们的 render() 方法变得更加简洁。

注意事项

1. 避免在渲染逻辑中过多使用 if 语句：在某些情况下，过多的条件语句可能使代码变得复杂，因此可以考虑将条件渲染的逻辑抽象到单独的组件中。
2. 具体化渲染内容：在复杂的场景中，确保每种状态渲染的内容相对独立，以提升组件的可维护性。

小结

在本章中，我们学习了如何使用 if 语句进行条件渲染，并探讨了如何将条件判断封装到单独的函数中，使代码更加清晰。充分利用条件渲染的能力，可以让我们的应用更具响应性和互动性。

接下来，在第七章中，我们将探讨列表与 key 的使用，以及如何通过 React 渲染列表来呈现动态数据。这是创建更复杂应用的关键所在。请继续关注！