在 React 中，条件渲染用于根据特定条件来动态展示不同的 UI。可以通过 JavaScript 的常见条件语句（如 if、三元运算符等）来控制组件渲染的内容。
React 主要通过以下几种方式实现条件判断：
- 使用
if语句 - 使用三元运算符
- 使用逻辑与（
&&）运算符 - 使用
switch语句（在一些情况下）
目录
1. 使用 if 语句
通过 if 语句在组件的 render 方法中或函数组件的返回部分执行条件判断。if 语句通常在事件处理函数或组件生命周期方法中使用。
示例：使用 if 语句进行条件渲染
import React from 'react';
function MyComponent({ isLoggedIn }) {
let message;
if (isLoggedIn) {
message = <h1>欢迎回来!</h1>;
} else {
message = <h1>请登录</h1>;
}
return (
<div>
{message}
</div>
);
}
export default MyComponent;
解释：
isLoggedIn是一个布尔值属性，用来判断用户是否已登录。if语句用来根据登录状态返回不同的消息。
2. 使用三元运算符
三元运算符（condition ? expr1 : expr2）是条件渲染中最常用的一种方法。它非常简洁，并且适用于在 JSX 中直接根据条件渲染不同的内容。
示例：使用三元运算符进行条件渲染
import React from 'react';
function MyComponent({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <h1>欢迎回来!</h1> : <h1>请登录</h1>}
</div>
);
}
export default MyComponent;
解释：
- 如果
isLoggedIn为true，则显示“欢迎回来！”。 - 如果
isLoggedIn为false，则显示“请登录”。
3. 使用逻辑与运算符（&&）
逻辑与运算符（&&）是 React 中常用的条件渲染技巧。当条件为 true 时，渲染 && 后面的内容；当条件为 false 时，React 会忽略后面的内容。
示例：使用逻辑与运算符进行条件渲染
import React from 'react';
function MyComponent({ isLoggedIn }) {
return (
<div>
{isLoggedIn && <h1>欢迎回来!</h1>}
</div>
);
}
export default MyComponent;
解释：
- 如果
isLoggedIn为true，则渲染<h1>欢迎回来!</h1>。 - 如果
isLoggedIn为false，则不渲染任何内容（false后面的部分被忽略）。
使用逻辑与的限制
&& 运算符只能用于在条件为 true 时渲染内容。如果需要在条件为 false 时渲染不同的内容，三元运算符更为合适。
4. 条件渲染与返回多个元素
有时，我们需要根据条件渲染多个组件或元素。在这种情况下，可以使用 if 语句、三元运算符或 && 运算符，甚至结合 React.Fragment 或数组来返回多个元素。
示例：返回多个元素
import React from 'react';
function MyComponent({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? (
<>
<h1>欢迎回来!</h1>
<button>查看通知</button>
</>
) : (
<button>登录</button>
)}
</div>
);
}
export default MyComponent;
解释：
- 当
isLoggedIn为true时，渲染欢迎信息和通知按钮。 - 当
isLoggedIn为false时，渲染一个登录按钮。
这里使用了 React.Fragment (<> 和 </>) 来包裹多个元素，而不会添加额外的 DOM 节点。
5. 参考资料
出站链接
站内链接
条件渲染是 React 中的核心概念之一，它帮助开发者根据特定条件动态显示不同的组件或 UI 元素。无论是简单的 if 语句，还是常用的三元运算符和逻辑与运算符，React 提供了多种方法来处理条件渲染，并允许开发者根据需要灵活地控制组件的行为和显示。
发表回复