ReactJS 中的条件渲染

reactjsweb developmentfront end technology更新于 2026/1/26 18:07:17

在本文中，我们将了解如何在 React 应用程序中根据某些条件有条件地渲染组件

在 ReactJS 中，我们可以使用 if-else 语句或 JavaScript 的逻辑运算符 && 根据某些给定条件仅渲染所需的组件。当提供的条件满足时，React 将匹配 UI 并进行相应的更新。

使用 if-else 条件

示例

在本例中，我们将构建一个 React 应用程序，其父组件为 App 组件，该组件将有条件地重新渲染 Form 组件并相应地更新 UI。

App.jsx

import React, { useState } from 'react';
const App = () => {
   const [isLogin, setIsLogin] = useState(true);
   return (
      <div>
      <div>Username: Tutorialspoint</div>
      <div onClick={() => setIsLogin((prev) => !prev)}>
      {isLogin ? <Form login /> : <Form logout />}
      </div>
      </div>
   );
};

const Form = ({ login, logout }) => {
   return (
      <div>
      {login ? (
      <>
         <input placeholder="Email" />
         <input placeholder="Password" />
         <button>Login</button>
      </>
      ) : null}
      {logout ? (
         <button>Logout</button>
      ) : null}
      </div>
   );
};
export default App;

输出

Using logical &&

示例

App.jsx

import React, { useState } from 'react';
const App = () => {
   const [isLogin, setIsLogin] = useState(true);
   return (
      <div>
      <div>Username: Tutorialspoint</div>
      <div onClick={() => setIsLogin((prev) => !prev)}>
      {isLogin ? <Form login /> : <Form logout />}
      </div>
      </div>
   );
};

const Form = ({ login, logout }) => {
   return (
      <div>
      {login && (
      <>
         <input placeholder="Email" />
         <input placeholder="Password" />
         <button>Login</button>
      </>
      )}
      {logout && (
         <button>Logout</button>
      )}
      </div>
   );
};
export default App;