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

React 1年前 15

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

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

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;

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

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

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

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

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

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

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 循环。

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

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

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;