数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究ReactJS 中的条件渲染
本文介绍如何基于 React 应用程序中的某些条件有条件地渲染组件
在 ReactJS 中，我们可以通过使用 if-else 语句或 && 运算符有条件地仅渲染基于给定条件所需组件。当给定的条件得到满足，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;输出
使用逻辑 &&
示例
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;输出
更新日期：18-Mar-2021
498 次浏览
广告