16 条件渲染之条件渲染的方式

在上一章中，我们讨论了如何在 React 中处理事件，包括事件的绑定和处理函数的使用。今天，我们将进入另一个重要的主题——条件渲染。在实际开发中，您可能需要根据某种条件来控制组件的显示与隐藏，或者呈现不同的内容。在 React 中，有多种方法可以实现条件渲染，以下是几种常见的方式。

使用if语句

最基本的条件渲染可以使用 JavaScript 的 if 语句来实现。这种方法通常在组件的渲染方法中使用。

示例

以下是一个简单的示例，根据 isLoggedIn 的值来决定显示的内容：

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;

    let button;
    if (isLoggedIn) {
      button = <button onClick={this.handleLogout}>Logout</button>;
    } else {
      button = <button onClick={this.handleLogin}>Login</button>;
    }

    return (
      <div>
        <h1>{isLoggedIn ? 'Welcome back!' : 'Please log in.'}</h1>
        {button}
      </div>
    );
  }
}

export default LoginControl;

在这个例子中，我们使用 if 语句来初始化一个 button 变量，根据用户是否已登录来决定按钮的内容。当用户点击按钮时，isLoggedIn 的状态会更新，从而重新渲染组件。

使用三元运算符

使用三元运算符是一种更简洁的条件渲染方式。适用于仅需要返回两个结果的情况。

示例

我们可以将上面的示例改写为使用三元运算符：

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;

    return (
      <div>
        <h1>{isLoggedIn ? 'Welcome back!' : 'Please log in.'}</h1>
        <button onClick={isLoggedIn ? this.handleLogout : this.handleLogin}>
          {isLoggedIn ? 'Logout' : 'Login'}
        </button>
      </div>
    );
  }
}

export default LoginControl;

在这个示例中，我们用三元运算符直接在 JSX 中进行条件判断，使得代码更加简洁。

使用短路运算符

短路运算符是条件渲染中非常实用的一种方式，尤其适用于需要在条件为“真”时才渲染某个元素的场景。

示例

以下示例展示了如何使用短路运算符进行条件渲染：

import React from 'react';

class Mailbox extends React.Component {
  render() {
    const unreadMessages = this.props.unreadMessages;
    return (
      <div>
        <h1>Hello!</h1>
        {unreadMessages.length > 0 && (
          <h2>
            You have {unreadMessages.length} unread messages.
          </h2>
        )}
      </div>
    );
  }
}

export default Mailbox;

在这个例子中，unreadMessages.length > 0 作为条件，如果该条件成立，则渲染未读消息的数量。否则，如果没有未读消息，相关信息将不会被渲染。

小结

在这一章中，我们探讨了 React 中实现条件渲染的多种方法，包括 if 语句、三元运算符和短路运算符。根据不同的需求和场合，您可以选择最适合的方式来实现条件渲染。通过灵活运用这些技巧，您可以使组件在用户交互时表现得更加动态和友好。

在下一章中，我们将继续深入探讨条件渲染的另一种方式——短路运算符。这将帮助您更好地理解如何在 React 应用中有效地使用这些技巧。