【前端】如何在 JSX 中使用条件语句和循环

🕗 发布于 2024-11-07 05:52 前端框架 react.js javascript 开发语言

在 JSX 中使用条件语句和循环是常见的需求，尤其是在构建动态用户界面时。以下是如何在 JSX 中使用条件语句和循环的详细说明。
在这里插入图片描述

条件语句

1. 三元运算符

三元运算符是最简单的条件语句形式，适用于简单的条件判断。

const isLoggedIn = true;

const element = (
  <div>
    {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
  </div>
);

2. 逻辑与运算符 (`&&`)

逻辑与运算符可以用来在条件为真时渲染某个元素。

const isLoggedIn = true;

const element = (
  <div>
    {isLoggedIn && <p>Welcome back!</p>}
  </div>
);

3. `if-else` 语句

虽然 JSX 不直接支持 if-else 语句，但可以在 JSX 外部使用 if-else 语句来决定渲染什么内容。

const isLoggedIn = true;

let greeting;
if (isLoggedIn) {
  greeting = <p>Welcome back!</p>;
} else {
  greeting = <p>Please log in.</p>;
}

const element = (
  <div>
    {greeting}
  </div>
);

循环

1. `map` 方法

map 方法是数组中常用的循环方法，适用于遍历数组并生成 JSX 元素。

const items = ['Apple', 'Banana', 'Cherry'];

const element = (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

注意：在生成的 JSX 元素中，建议使用 key 属性来唯一标识每个元素，以提高性能和避免潜在的问题。

2. `for` 循环

虽然可以直接在 JSX 中使用 for 循环，但通常更推荐使用 map 方法，因为 map 方法返回一个新的数组，更适合在 JSX 中使用。

const items = ['Apple', 'Banana', 'Cherry'];

const listItems = [];
for (let i = 0; i < items.length; i++) {
  listItems.push(<li key={i}>{items[i]}</li>);
}

const element = (
  <ul>
    {listItems}
  </ul>
);

组合条件语句和循环

在实际应用中，条件语句和循环经常组合使用。以下是一个更复杂的例子，展示了如何在 JSX 中同时使用条件语句和循环。

const users = [
  { id: 1, name: 'Alice', isAdmin: true },
  { id: 2, name: 'Bob', isAdmin: false },
  { id: 3, name: 'Charlie', isAdmin: false }
];

const element = (
  <div>
    <h1>User List</h1>
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name} {user.isAdmin && <span>(Admin)</span>}
        </li>
      ))}
    </ul>
  </div>
);

在 JSX 中使用循环和条件语句时，有一些限制和最佳实践需要注意，以确保代码的可读性和性能。以下是一些常见的限制和注意事项：

循环的限制和注意事项

避免在 JSX 中直接使用 for 循环：

虽然可以在 JSX 中使用 for 循环，但这通常会使代码变得难以阅读和维护。推荐使用 map 方法来遍历数组。

// 不推荐
const items = ['Apple', 'Banana', 'Cherry'];
let listItems = [];
for (let i = 0; i < items.length; i++) {
  listItems.push(<li key={i}>{items[i]}</li>);
}
const element = <ul>{listItems}</ul>;

// 推荐
const items = ['Apple', 'Banana', 'Cherry'];
const element = (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

使用 key 属性：
- 在生成的 JSX 元素中，必须为每个元素提供一个唯一的 key 属性。这有助于 React 高效地更新和渲染列表。
```
const items = ['Apple', 'Banana', 'Cherry'];
const element = (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);
```
- 尽量使用稳定的、唯一的标识符作为 key，而不是数组索引。

避免在 map 中进行复杂的计算：

如果在 map 方法中进行复杂的计算或异步操作，可能会导致性能问题。考虑将这些操作移到组件的生命周期方法或其他地方。

// 不推荐
const items = [/* 大量数据 */];
const element = (
  <ul>
    {items.map(item => (
      <li key={item.id}>{computeComplexValue(item)}</li>
    ))}
  </ul>
);

// 推荐
const items = [/* 大量数据 */];
const computedItems = items.map(item => ({
  ...item,
  computedValue: computeComplexValue(item)
}));
const element = (
  <ul>
    {computedItems.map(item => (
      <li key={item.id}>{item.computedValue}</li>
    ))}
  </ul>
);

条件语句的限制和注意事项

避免在 JSX 中使用复杂的条件逻辑：

尽量避免在 JSX 中使用复杂的条件逻辑。如果条件逻辑比较复杂，可以将其提取到组件的方法或变量中。

// 不推荐
const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? (
      <p>Welcome back!</p>
    ) : (
      <p>Please log in.</p>
    )}
  </div>
);

// 推荐
const isLoggedIn = true;
const greeting = isLoggedIn ? 'Welcome back!' : 'Please log in.';
const element = (
  <div>
    <p>{greeting}</p>
  </div>
);

使用 && 运算符时注意空值：
- 使用 && 运算符时，如果左侧表达式的值为 false、null、undefined、0 或 NaN，右侧的表达式将不会被计算。因此，需要注意这些情况。
```
const isLoggedIn = null;
const element = (
  <div>
    {isLoggedIn && <p>Welcome back!</p>}
  </div>
);
// 上面的代码不会渲染 <p>Welcome back!</p>，因为 isLoggedIn 是 null
```

避免在条件语句中使用副作用：

条件语句中的表达式应该是纯函数，避免产生副作用。例如，不要在条件语句中修改状态或执行网络请求。

// 不推荐
const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn && fetchData()}
  </div>
);

// 推荐
const isLoggedIn = true;
useEffect(() => {
  if (isLoggedIn) {
    fetchData();
  }
}, [isLoggedIn]);
const element = (
  <div>
    {isLoggedIn && <p>Welcome back!</p>}
  </div>
);

总结

循环：
- 使用 map 方法而不是 for 循环。
- 为每个生成的元素提供唯一的 key 属性。
- 避免在 map 中进行复杂的计算。
条件语句：
- 避免在 JSX 中使用复杂的条件逻辑。
- 使用 && 运算符时注意空值。
- 避免在条件语句中使用副作用。
组合使用：在实际应用中，条件语句和循环经常组合使用，以生成动态的用户界面。

通过这些方法，您可以灵活地在 JSX 中处理条件和循环，构建复杂且动态的用户界面。

原文地址：https://blog.csdn.net/u010690311/article/details/143575872

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：OpenCV基础05_GUI和PyMsql
下一篇：使用 Faster Whisper 和 Gradio 实现实时语音转文字

海外媒体发稿与宣发：拓展全球影响力的关键-大舍传媒
总之，海外媒体发稿与宣发是一项综合性的工作，需要精心策划、持续投入和专业的执行。通过掌握正确的策略和技巧，充分利用这一工具，您将能够在国际舞台上大放异彩，实现拓展全球影响力的目标。无论是企业寻求业务增
阅读更多2024-11-07
OBOO鸥柏丨传媒广告行业的创新应用解决数字技术短板
OBOO鸥柏立式广告机作为这一领域的创新显示产品新技术，搭载VS6.0/满天星(MTSTAR)信息发布系统网络云平台技术科技，以其独特的技术优势和卓越的展览展示宣传播放应用效果，鸥柏信发系统远程集中管
阅读更多2024-11-07
SSLHandshakeException错误解决方案
导致，不同https安全协议不一致，TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。查阅资料，确定是由于JDK版本问题，测试项目中使用
阅读更多2024-11-07
C语言 | Leetcode C语言题解之第541题反转字符串II
C语言 | Leetcode C语言题解之第541题反转字符串II
阅读更多2024-11-07
wps怎么算出一行1和0两种数值中连续数值1的个数,出现0后不再计算？
在WPS表格中，要计算一行中连续1的个数，并且在遇到0之后停止计数，可以使用一个自定义的公式。假设你的数据存储在A1到A10的单元格中，你可以使用以下步骤来实现这个目标。这个公式表示：如果A2是1，则
阅读更多2024-11-07
STM32中，定时器使用ETR引脚和使用APB1时钟是否一致？
例如，当使用ETR引脚作为定时器的触发源时，可能需要配置定时器的时钟源为APB1时钟（或其他适当的时钟源），以确保定时器能够正确地响应外部触发信号并进行计数。在STM32中，定时器的时钟源可以选择来自
阅读更多2024-11-07
【c++语言程序设计】字符串与浅层复制（深拷贝与浅拷贝）
适合处理结构化文本输入，指定分隔符来分割输入内容，例如CSV文件的逐行读取。
阅读更多2024-11-07
产品如何3D建模？如何根据使用场景选购3D扫描仪？
随着科技的飞速发展，3D模型已从昔日的小众应用转变为各行各业不可或缺的利器。在文博、电商、家居、汽车、建筑及游戏影视等众多领域，3D模型以其直观、真实的视觉体验发挥着至关重要的作用。它不仅使用户能深入
阅读更多2024-11-07
赠你一只金色的眼 - 富集分析和表达数据可视化
GOplot包用于生物数据的可视化。更确切地说，该包将表达数据与功能分析的结果整合并进行可视化。但是要注意该包不能用于执行这些分析，只能把分析结果进行可视化。在所有科学领域，由于空间限制和结果所需的简
阅读更多2024-11-07
【蓝桥杯选拔赛真题78】python电话号码第十五届青少年组蓝桥杯python选拔赛真题算法思维真题解析
给定一个长度为 11 的字符串 S，表示电话号码，然后将电话号码中第三位数字后的连续四位数字用"*"替换，并输出替换后的字符串。例如:S ="13900001234&qu
阅读更多2024-11-07

【前端】如何在 JSX 中使用条件语句和循环

条件语句

1. 三元运算符

2. 逻辑与运算符 (&&)

3. if-else 语句

循环

1. map 方法

2. for 循环