迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

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

作者:迹忆客 最近更新:2022/11/24 浏览次数:

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

  1. 使用 Array.from() 方法生成 N 个元素的数组。
  2. 用实际组件替换数组中的每个元素。
  3. 渲染元素数组。
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 个相同的组件/元素:

  1. 声明一个将存储元素的空数组。
  2. 使用 for 循环迭代 N 次。
  3. 在每次迭代中,将元素推入数组。
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 组件推入数组。

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

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便