如何在 React 中使用 Map() 函数导出 JavaScript

2020-06-05 08:00:00 · 飞浪

介绍在开发React应用时，您会遇到必须处理数组的用例。这些用例可能涉及来自外部API的数据、来自后端服务的响应，或者最常见的是在组件中呈现数据项列表。 map()函数允许您通过迭代和

介绍

在开发 React 应用时，您会遇到必须处理数组的用例。这些用例可能涉及来自外部 API 的数据、来自后端服务的响应，或者最常见的是在组件中呈现数据项列表。

map ()函数允许您通过迭代和访问单个项目来操作数组中的项目。在本指南中，您将学习如何使用map()函数并将其导出。

Map() 函数

map ()函数用于迭代数组并操作或更改数据项。在 React 中，map()函数最常用于将数据列表渲染到 DOM。

要使用map()函数，请将其附加到要迭代的数组。map ()函数需要回调作为参数，并对数组中的每个元素执行一次。从回调参数中，您可以访问当前元素、当前索引和数组本身。map ()函数还接受一个可选的第二个参数，您可以将其传递以在回调中用作this。每次执行回调时，返回的值都会添加到新数组中。

      let new_array = arr.map(function callback( currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])
    

看看下面的例子。

      const num = [3, 8, 11, 7, 5];

const num2x = num.map((n) => n * 2);

console.log(num2x); // [6, 16, 22, 14, 10]

这里，数组num中的每个元素都乘以 2，并存储在一个新数组中。请注意，map()函数不会改变原始数组；相反，它会使用原始数组中修改后的元素创建一个新数组。

在 React 中的使用

考虑一个包含用户 ID 和名称的对象数组。要将其显示到 DOM，您需要使用 map ()函数并从回调函数返回 JSX。这是React 中map()函数最常见的用例。

      const Users = () => {
  const data = [
    { id: 1, name: "John Doe" },
    { id: 2, name: "Victor Wayne" },
    { id: 3, name: "Jane Doe" },
  ];

  return (
    <div className="users">
      {data.map((user) => (
        <div className="user">{user}</div>
      ))}
    </div>
  );
};
    

除了渲染之外，map()函数还可以在实用函数中使用，可以从另一个文件导入。

假设您有一个不同大小的图像数组。

      const imageSizes = [
  { name: "horizontal", width: 600, height: 380 },
  { name: "vertical", width: 400, height: 650 },
  { name: "thumbnail", width: 300, height: 300 },
];
    

您需要将对象规范化为具有以下格式的字符串：“水平图像 - 600 x 380”。

      imageSizes.map((a) => {
  const capitalizedName = a.name[0].toUpperCase() + a.name.slice(1);
  return `${captalizedName} image - ${a.width} x ${a.height}`;
});
    

接下来，将其变成可重复使用的实用函数，并将该函数命名为stringifyImageSizes。

      const stringifyImageSizes = (imageSizes) => {
  return imageSizes.map((a) => {
    const capitalizedName = a.name[0].toUpperCase() + a.name.slice(1);
    return `${captalizedName} image - ${a.width} x ${a.height}`;
  });
};
    

在函数声明前添加export关键字，以便您可以在任何其他.js或.jsx文件中访问它。

      export const stringifyImageSizes = (imageSizes) => {
  // ...
};
    

现在，使用组件文件中的import关键字导入该函数。

      import React from "react";

import { stringifyImageSizes } from "./utils";

const Images = () => {
  const imageSizes = [
    { name: "horizontal", width: 600, height: 380 },
    { name: "vertical", width: 400, height: 650 },
    { name: "thumbnail", width: 300, height: 300 },
  ];

  const normalizedImageStrings = stringifyImageSizes(imageSizes);

  return (
    <div className="images">
      {normalizedImageStrings.map((s) => (
        <div className="image-type">{s}</div>
      ))}
    </div>
  );
};
    

瞧，就是这样。很简单，对吧？

结论

使用map()函数，您几乎可以进行各种操作而无需改变原始数组。非变异部分至关重要，因为它默认情况下不会引起任何副作用，并且可以轻松调试代码。如果要改变原始数组，可以使用传统的for或任何其他类型的循环，也可以使用forEach()函数。

了解更多

探索 Pluralsight 的这些 React 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React 中使用 Map() 函数导出 JavaScript

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

const Users = () => { const data = [ { id: 1, name: "John Doe" }, { id: 2, name: "Victor Wayne" }, { id: 3, name: "Jane Doe" }, ]; return ( <div className="users"> {data.map((user) => ( <div className="user">{user}</div> ))} </div> ); };

import React from "react"; import { stringifyImageSizes } from "./utils"; const Images = () => { const imageSizes = [ { name: "horizontal", width: 600, height: 380 }, { name: "vertical", width: 400, height: 650 }, { name: "thumbnail", width: 300, height: 300 }, ]; const normalizedImageStrings = stringifyImageSizes(imageSizes); return ( <div className="images"> {normalizedImageStrings.map((s) => ( <div className="image-type">{s}</div> ))} </div> ); };