在 React 中创建 N 个相同的组件/元素

在 React 中创建 N 个相同的组件/元素：

使用该Array.from()方法生成一个包含 N 个元素的数组。
用实际组件替换数组中的每个元素。
渲染元素数组。

应用程序.js


function Header() {
  return <h2>Hello world</h2>;
}

const App = () => {
  const threeHeaders = Array.from({length: 3}, (_, index) => {
    return <Header key={index} />;
  });

  console.log(threeHeaders);

  return <div>{threeHeaders}</div>;
};

export default App;

代码示例创建一个包含 3 个Header
组件实例的数组并呈现它们。

我们使用
Array.from
方法生成一个包含 3 个元素的数组。

该Array.from方法采用的第二个参数是一个函数，该函数会在数组中的每个元素上调用。 map

在每次迭代中，我们用我们的元素实例替换空元素Header
。

存储在变量中的最终结果threeHeaders是一个包含 3 个Header组件实例的数组。

我们渲染了包裹在 a 中的组件数组div，但是，这不是必需的。

应用程序.js


function Header() {
  return <h2>Hello world</h2>;
}

const App = () => {
  const threeHeaders = Array.from({length: 3}, (_, index) => {
    return <Header key={index} />;
  });

  console.log(threeHeaders);

  // 👇️ without wrapper div
  return threeHeaders;
};

export default App;

另一种方法是使用简单的 for 循环。

`for`使用循环创建 N 个相同的组件/元素

这是一个三步过程：

声明一个将存储元素的空数组。
使用 for 循环迭代 N 次。
在每次迭代中，将元素推入数组。

应用程序.js


function Header() {
  return <h2>Hello world</h2>;
}

const App = () => {
  const headers = [];

  const total = 3;

  for (let index = 0; index < total; index++) {
    headers.push(<Header key={index} />);
  }

  console.log(headers);

  return <div>{headers}</div>;
};

export default App;

此代码片段使用一个简单的循环实现了相同的结果for。

我们循环 N 次并在每次迭代中将 React 组件推入数组。

最后一步是渲染组件数组。

在 React 中将 JSX 元素连接成一个数组

如果你需要将 JSX 元素连接成一个数组：

初始化一个空数组。
使用push()方法将 JSX 元素推送到数组中。
将最外层 JSX 元素上的 prop设置key为唯一值。

应用程序.js


export default function App() {
  const fruits = [];

  fruits.push(<div key="apple">Apple</div>);
  fruits.push(<div key="banana">Banana</div>);
  fruits.push(<div key="kiwi">Kiwi</div>);

  // 👇️ or if you have an array of strings
  const names = ['Alice', 'Bob', 'Carl'];

  const namesJsx = [];

  names.forEach((name, index) => {
    namesJsx.push(
      <div key={index}>
        <h2>{name}</h2>
        <hr />
      </div>,
    );
  });

  return (
    <div>
      <div>{fruits}</div>

      <br />

      <div>{namesJsx}</div>
    </div>
  );
}

第一个示例将 JSX 元素压入一个数组，然后渲染该元素数组。

我们必须将key每个元素的 prop 设置为唯一值。

应用程序.js


const fruits = [];

fruits.push(<div key="apple">Apple</div>);
fruits.push(<div key="banana">Banana</div>);
fruits.push(<div key="kiwi">Kiwi</div>);

The key prop is used internally by React for performance reasons. It helps the
library make sure to only re-render the array elements that have changed.

Concatenate JSX elements into an Array using forEach() #

The second example shows how to iterate over an array of strings using the
forEach() method and push a JSX element into a new array on each iteration.

App.js


const names = ['Alice', 'Bob', 'Carl'];

const namesJsx = [];

names.forEach((name, index) => {
  namesJsx.push(
    <div key={index}>
      <h2>{name}</h2>
      <hr />
    </div>,
  );
});

The
Array.forEach
method can be used when you need to call a function for every element in an
array.

However, forEach() can’t be used to iterate over an array directly in your JSX code.

The forEach() method calls the provided function with each element in the
array but returns undefined.

直接在我们的 JSX 代码中使用它是没有意义的，因为我们需要返回 JSX 元素而不是undefined.

您可以使用该forEach()方法来：

遍历一个数组。
将 JSX 元素推送到一个新数组中。
渲染 JSX 元素。

应用程序.js


export default function App() {
  const names = ['Alice', 'Bob', 'Carl'];

  const namesJsx = [];

  names.forEach((name, index) => {
    namesJsx.push(
      <div key={index}>
        <h2>{name}</h2>
        <hr />
      </div>,
    );
  });

  return (
    <div>
      <div>{namesJsx}</div>
    </div>
  );
}

在 React 中创建 N 个相同的组件/元素

目录

Create N of the same Component/Element in React