在 React 中使用带有索引的 map() 方法

在 React 中使用带有索引的 map() 方法:

  1. 在数组上调用 map() 方法。
  2. 传递给 map() 方法的函数会被元素和索引调用。
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', salary: 100},
    {id: 2, name: 'Bob', salary: 75},
    {id: 3, name: 'Carl', salary: 125},
  ];

  return (
    <div>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <h2>Index: {index}</h2>
            <h2>Name: {employee.name}</h2>
            <h2>Salary: {employee.salary}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

我们传递给 Array.map 方法的函数会使用数组中的每个元素和当前迭代的索引来调用。

在每次迭代中,我们在 employee 对象上呈现 index 以及 name 和 salary 属性。

我们在示例中使用了 key prop 的索引,但是如果你有一个稳定的唯一标识符,最好使用它。我们可以在每个对象上使用 id 属性。

出于性能原因,React 在内部使用 key prop。它有助于库确保仅重新渲染已更改的数组元素。

我们在示例中使用了带有显式返回语句的箭头函数。如果只需要渲染一些 JSX 元素并且不使用条件、声明变量等,我们可以使用隐式返回,这将使代码更具可读性。

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', salary: 100},
    {id: 2, name: 'Bob', salary: 75},
    {id: 3, name: 'Carl', salary: 125},
  ];

  return (
    <div>
      {employees.map((employee, index) => (
        <div key={index}>
          <h2>Index: {index}</h2>
          <h2>Name: {employee.name}</h2>
          <h2>Salary: {employee.salary}</h2>

          <hr />
        </div>
      ))}
    </div>
  );
}

我们对传递给 map() 方法的箭头函数使用了隐式返回。

const arr = ['a', 'b', 'c'];

// 👇️ explicit return
const result1 = arr.map(element => {
  return element;
});

// 👇️ implicit return
const result2 = arr.map(element => element);

当我们不必使用条件或在传递给 map() 的函数中定义变量时,我们只能使用隐式返回。