React 条件渲染

摘要：在本教程中，您将学习如何使用 if 语句、逻辑 AND 运算符（&&）和逻辑 OR 运算符（||）有条件地渲染 JSX 元素。

有时您可能希望根据条件显示不同的 JSX 元素。为此，您可以使用以下三种技术之一

• if 语句 或 三元运算符 (?:)。
• 逻辑 AND 运算符 (&&).
• 逻辑 OR 运算符（||）。

我们将创建一个简单的 React 应用程序来演示每种技术。

创建 React 应用程序

首先，打开终端并运行 npx create-react-app 命令以创建一个新的 React 应用程序

npx create-react-app todoCode language: plaintext (plaintext)

其次，删除 src 目录中的所有文件。

第三，在 src 目录中创建一个 index.js 文件。index.js 文件将在屏幕上渲染 App 组件

import ReactDOM from 'react-dom/client';
import App from './App.js';

const el = document.querySelector('#root');
const root = ReactDOM.createRoot(el);

root.render(<App />);Code language: JavaScript (javascript)

第四，在 src 目录中创建一个 App.js 来托管 App 组件

import TodoList from './TodoList';

const App = () => {
  const todos = [
    { id: 1, title: 'Learn React', completed: true },
    { id: 2, title: 'Build an app', completed: false },
    { id: 3, title: 'Deploy the app', completed: false },
  ];

  return (
    <main>
      <h1>Todo List</h1>
      <TodoList todos={todos} />
    </main>
  );
};

export default App;Code language: JavaScript (javascript)

App 组件将待办事项对象的数组传递给 TodoList 组件。

最后，创建 TodoList.js 文件来存储 TodoList 组件

const TodoList = ({ todos }) => {
  const renderedTodos = todos.map((todo) => {
    return <div key={todo.id}>{todo.title}</div>;
  });

  return <section>{renderedTodos}</section>;
};

export default TodoList;Code language: JavaScript (javascript)

TodoList 组件将待办事项数组中的数据渲染到 div 元素中。

以下是输出

要检查已完成的待办事项，您可以使用上述方法之一渲染每个已完成的待办事项。

使用 if 语句进行条件渲染

以下代码使用 if 语句根据每个待办事项对象的 completed 属性返回不同的 JSX 元素

const TodoList = ({ todos }) => {
  const renderedTodos = todos.map(({ id, title, completed }) => {
    if (completed) {
      return <div key={id}>✔ {title}</div>;
    }
    return <div key={id}>{title}</div>;
  });

  return <section>{renderedTodos}</section>;
};

export default TodoList;Code language: JavaScript (javascript)

输出

或者，您可以使用三元运算符（?:）使代码更简洁

const TodoList = ({ todos }) => {
  const renderedTodos = todos.map(({id, title, completed}) => {
    return (
      <div key={id}>
        {completed ? '✔' : ''}
        {title}
      </div>
    );
  });

  return <section>{renderedTodos}</section>;
};

export default TodoList;Code language: JavaScript (javascript)

在此示例中，我们直接在 JSX 中使用以下表达式

{todo.completed ? '✔' : ''}Code language: JavaScript (javascript)

如果 completed 为 true，则表达式返回复选标记，否则返回空字符串。

使用逻辑 AND 运算符进行条件渲染

逻辑 AND 运算符允许您返回第一个假值或最后一个真值

const result = value1 && value2;Code language: JavaScript (javascript)

您可以利用此功能有条件地渲染 JSX 中的元素

const TodoList = ({ todos }) => {
  const renderedTodos = todos.map((todo) => {
    return (
      <div key={todo.id}>
        {todo.completed && '✔'}
        {todo.title}
      </div>
    );
  });

  return <section>{renderedTodos}</section>;
};

export default TodoList;Code language: JavaScript (javascript)

在此示例中，如果 completed 为 false，则表达式返回第一个假值，即 false。因此，React 将显示一个空字符串，因为 JSX 不会渲染布尔值（true 和 false）

如果 completed 为 true，则表达式返回 '✔'，因为它是最后一个真值。因此，React 将为已完成的待办事项渲染 '✔'。

使用逻辑 || 运算符进行条件渲染

逻辑 OR 运算符（||）返回第一个真值或最后一个假值

const result = value1 || value2;Code language: JavaScript (javascript)

假设您希望在未完成的待办事项前面显示字符 '✖'。要实现这一点，您可以使用逻辑 OR 运算符（||）

{todo.completed || '✖'}Code language: JavaScript (javascript)

如果 completed 为 true，则表达式返回 true，如果 completed 为 false，则表达式返回字符 '✖'。

const TodoList = ({ todos }) => {
  const renderedTodos = todos.map(({ id, title, completed }) => {
    return (
      <div key={id}>
        {completed && '✔'}
        {completed || '✖'}
        {title}
      </div>
    );
  });

  return <section>{renderedTodos}</section>;
};

export default TodoList;Code language: JavaScript (javascript)

输出

总结

• 使用 if 语句根据条件返回不同的 JSX 元素。
• 使用三元运算符、逻辑 AND 运算符和逻辑 OR 运算符有条件地在 JSX 中渲染元素