React 中在 map() 中使用条件跳出map的方法

更新时间：2023年09月28日 10:46:29 作者：火焰兔

这篇文章主要介绍了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库之react-beautiful-dnd介绍及其使用过程
在使用React构建Web应用程序时,拖拽功能是一项常见需求,为了方便实现拖拽功能,我们可以借助第三方库react-beautiful-dnd,本文将介绍react-beautiful-dnd的基本概念,并结合实际的项目代码一步步详细介绍其使用过程,需要的朋友可以参考下
2023-11-11
react+tsx中使用better-scroll详解
这篇文章主要介绍了react+tsx中使用better-scroll,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
React中实现组件通信的几种方式小结
在构建复杂的React应用时,组件之间的通信是至关重要的,从简单的父子组件通信到跨组件状态同步,不同组件之间的通信方式多种多样,下面我们认识react组件通信的几种方式,需要的朋友可以参考下
2024-04-04
React hooks使用方法全面汇总
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
利用React Router4实现的服务端直出渲染(SSR)
这篇文章主要介绍了利用React Router4实现的服务端直出渲染(SSR)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
React Native中实现动态导入的示例代码
随着业务的发展，每一个 React Native 应用的代码数量都在不断增加。作为一个前端想到的方案自然就是动态导入（Dynamic import）了，本文介绍了React Native中实现动态导入的示例代码，需要的可以参考一下
2022-06-06
React使用Ant Design方式(简单使用)
文章介绍了AntDesign组件库,它是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品,文章详细讲解了如何下载和按需引入antd组件库,并通过一个小案例展示了如何使用antd进行布局和改造,最后,文章提醒大家在使用过程中可以参考官网的属性介绍
2024-11-11
使用React-Router实现前端路由鉴权的示例代码
这篇文章主要介绍了使用React-Router实现前端路由鉴权的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
React中完整实例讲解Recoil状态管理库的使用
这篇文章主要介绍了React中Recoil状态管理库的使用，Recoil的产生源于Facebook内部一个可视化数据分析相关的应用，在使用React的实现的过程中，因为现有状态管理工具不能很好的满足应用的需求，因此催生出了Recoil，对Recoil感兴趣可以参考下文
2023-05-05
react中涉及的增加,删除list方式
这篇文章主要介绍了react中涉及的增加,删除list方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01