React 中在 map() 中使用条件跳出map的方法
React 中在 map() 中使用条件：
- 在数组上调用
map()方法。 - 使用
if条件，如果条件满足则显式返回。 - 否则返回不同的值或返回
null以不呈现任何内容。
export default function App() {
const arr = [1, 2, 3, 4, 5, 6];
return (
<div>
{arr.map((element, index) => {
if (element % 2 === 0) {
return <h2 key={index}>{element}</h2>;
}
return <h2 key={index}>X</h2>;
})}
</div>
);
}我们使用 Array.map 方法迭代一个数组。
我们传递给
map()的函数将使用数组中的每个元素和当前迭代的索引进行调用。
在每次迭代中，我们检查元素是否可以被 2 整除，如果是，我们返回该元素，否则，我们返回 X。
如果您不需要渲染任何东西，则返回 null
如果你不想在 else 子句中渲染任何东西，你可以返回 null。
export default function App() {
const arr = [1, 2, 3, 4, 5, 6];
return (
<div>
{arr.map((element, index) => {
if (element % 2 === 0) {
return <h2 key={index}>{element}</h2>;
}
// 👇️ render nothing
return null;
})}
</div>
);
}该示例呈现可被 2 整除的数字，否则不呈现任何内容。
或者，我们可以使用三元运算符。
使用三元运算符在 map() 中使用条件
这是一个三步过程：
- 在数组上调用
map()方法。 - 使用三元运算符检查条件是否为真。
- 如果条件为真，运算符返回冒号左边的值，否则返回右边的值。
export default function App() {
const arr = [1, 2, 3, 4, 5, 6];
return (
<div>
{arr.map((element, index) => {
return element % 2 === 0 ? (
<h2 key={index}>{element}</h2>
) : (
<h2 key={index}>X</h2>
);
})}
</div>
);
}我们使用了与 if/else 语句非常相似的条件三元运算符。
如果问号前的表达式求值为真值，则返回冒号左侧的值，否则返回冒号右侧的值。
换句话说，如果元素可以被 2 整除，我们返回元素，否则返回 X。
和前面的例子一样，如果你想在 else 子句中什么都不返回，你就必须返回 null。
export default function App() {
const arr = [1, 2, 3, 4, 5, 6];
return (
<div>
{arr.map((element, index) => {
return element % 2 === 0 ? <h2 key={index}>{element}</h2> : null;
})}
</div>
);
}我们在示例中使用了 key prop 的索引，但是，如果有的话，最好使用一个稳定的唯一标识符。
出于性能原因，React 在内部使用 key 道具。 它帮助库确保只重新呈现已更改的数组元素。
话虽如此，除非您处理成千上万的数组元素，否则您不会看到任何明显的差异。
在 React 中打破 map() 循环（map() 只是数组的一部分）
要跳出 map() 循环：
- 对数组调用 slice() 方法以获取数组的一部分。
- 对数组的一部分调用 map() 方法。
- 遍历数组的一部分。
export default function App() {
const employees = [
{id: 1, name: 'Alice', country: 'Austria'},
{id: 2, name: 'Zadmei', country: 'China'},
{id: 3, name: 'Carl', country: 'Canada'},
{id: 4, name: 'Delilah', country: 'Denmark'},
{id: 5, name: 'Ethan', country: 'Egypt'},
];
// 👇️ map() first 2 elements of array
return (
<div>
{employees.slice(0, 2).map((employee, index) => {
return (
<div key={index}>
<h2>name: {employee.name}</h2>
<h2>country: {employee.country}</h2>
<hr />
</div>
);
})}
</div>
);
}Array.slice 方法不会修改原始数组，而是创建一个新数组（原始数组的浅表副本）。
我们将以下 2 个参数传递给 slice() 方法：
- startIndex 要包含在新数组中的第一个元素的索引
- endIndex 上去，但不包括这个索引
我们指定起始索引为 0，结束索引为 2，因此我们得到了包含元素 0 和 1 的数组的一部分。
即使我们提供给 Array.slice 方法的结束索引超过了数组的长度，该方法也不会抛出错误而是返回所有数组元素。
const arr = ['a', 'b', 'c']; const first100 = arr.slice(0, 100); console.log(first100); // 👉️ ['a', 'b', 'c']
我们试图获取一个数组的前 100 个元素，它只包含 3 个元素。
结果，新数组包含原始数组的所有 3 个元素。
Map() 只是数组的一部分，使用 filter()
我们还可以在调用 map() 之前使用 Array.filter 方法。
export default function App() {
const employees = [
{id: 1, name: 'Alice', country: 'Austria'},
{id: 2, name: 'Zadmei', country: 'China'},
{id: 3, name: 'Carl', country: 'Canada'},
{id: 4, name: 'Delilah', country: 'Denmark'},
{id: 5, name: 'Ethan', country: 'Egypt'},
];
// 👇️ map() LAST 2 elements of array
return (
<div>
{employees
.filter(employee => {
return (
employee.country === 'Belgium' || employee.country === 'Denmark'
);
})
.map((employee, index) => {
return (
<div key={index}>
<h2>name: {employee.name}</h2>
<h2>country: {employee.country}</h2>
<hr />
</div>
);
})}
</div>
);
}我们传递给 filter() 方法的函数会针对数组中的每个元素进行调用。
在每次迭代中，我们检查当前对象是否具有等于比利时或丹麦的国家/地区属性并返回结果。
filter()方法返回一个仅包含回调函数返回真值的元素的数组。
在示例中，仅使用 id 为 2 和 4 的对象调用 map() 方法。
到此这篇关于React 中在 map() 中使用条件跳出map的文章就介绍到这了,更多相关React 在 map() 中使用条件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了react+antd树选择下拉框中增加搜索框方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家介绍了React构建简洁强大可扩展的前端项目架构实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
React找不到模块“./index.module.scss”或其相应的类型声明及解决方法
这篇文章主要介绍了React找不到模块“./index.module.scss”或其相应的类型声明及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了React组件中的this的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
本文详细介绍了React中的双缓存Fiber树机制,包括概念、核心流程、优势以及面试中的常见问题和标准回答,通过"通俗+专业"的方式,帮助面试者全面理解React的性能优化体系,掌握双缓存Fiber树的关键点,感兴趣的朋友跟随小编一起看看吧2026-03-03
这篇文章主要介绍了React与Redux之数组处理讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
Fiber可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下2022-11-11
这篇文章主要为大家介绍了Component与PureComponent解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
setState是React组件中用于更新状态的方法,是类组件中的方法,用于更新组件的状态并重新渲染组件,本文给大家详细介绍了React中的setState执行机制,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-12-12
最新评论