React中如何通过循环动态创建并渲染多个div元素？

当然可以，React里完全支持动态生成并渲染多个元素，而且有几种更贴合框架逻辑的写法，比原生JS的方式更简洁。以下是几种常用的实现方式：

1. 使用数组map方法（最常用） #

这是React中动态渲染元素的标准写法，利用数组的map方法直接生成元素数组，然后嵌入JSX中：

function App() {
  // 生成包含10个div元素的数组
  const divElements = Array.from({ length: 10 }, (_, index) => (
    <div key={index}>Div {index + 1}</div>
  ));

  return <div className="parent">{divElements}</div>;
}

• Array.from({ length: 10 })用来创建一个长度为10的空数组，第二个参数的映射函数负责生成每个div元素
• 每个元素必须添加唯一的key属性，帮助React高效识别元素的变化（如果元素不会排序/增删，用index当key完全没问题）

2. 使用for循环构建元素数组 #

如果习惯for循环的写法，也可以先声明空数组，循环添加元素后再渲染：

function App() {
  const divElements = [];
  for (let i = 0; i < 10; i++) {
    divElements.push(<div key={i}>Div {i + 1}</div>);
  }

  return <div className="parent">{divElements}</div>;
}

循环生成的元素数组可以直接放在JSX中，React会自动遍历渲染数组里的所有元素。

3. 抽离逻辑为函数 #

如果生成逻辑比较复杂，可以把它封装成单独的函数，在组件渲染时调用：

function App() {
  const generateDivs = () => {
    const divs = [];
    for (let i = 0; i < 10; i++) {
      divs.push(<div key={i}>Div {i + 1}</div>);
    }
    return divs;
  };

  return <div className="parent">{generateDivs()}</div>;
}

函数返回的元素数组会被React直接渲染到页面上。

关键注意事项 #

• 不要像原生JS那样直接操作DOM（比如getElementById、appendChild），React是数据驱动视图，直接操作DOM会破坏虚拟DOM的更新机制，导致各种错误
• 不能在JSX的直接渲染逻辑里写裸for循环（比如return <div>{for(...){}}</div>），必须把循环结果整理成数组后再嵌入JSX
• 务必给每个动态元素加唯一key，这是React要求的规范，缺失会触发控制台警告

内容的提问来源于stack exchange，提问作者frantic-dev