React中如何从嵌套数组递归生成DOM元素？

这问题其实是React里很常见的递归场景，我帮你写个具体的实现思路和代码，完美匹配你的需求～

核心思路就是判断每个元素的类型：如果是数组，就递归处理里面的子元素；如果是普通元素，就直接生成对应的<div>组件。同时要注意React列表的key属性，避免渲染警告。

完整代码示例 #

import React from 'react';

// 定义递归渲染组件
const NestedArrayRenderer = ({ array }) => {
  // 递归处理每一层元素的函数
  const renderItems = (items) => {
    return items.map((item, index) => {
      // 遇到嵌套数组，递归渲染内部元素，并包裹一层div（对应你示例里的嵌套结构）
      if (Array.isArray(item)) {
        return (
          <div key={`nested-${index}`}>
            {renderItems(item)}
          </div>
        );
      }
      // 非数组元素，生成对应的div
      return (
        <div key={item} className={item}>
          {/* 这里可以添加div内部的内容，比如显示元素值：{item} */}
        </div>
      );
    });
  };

  return <div className="root-container">{renderItems(array)}</div>;
};

// 使用示例
const sampleArray = ['el1', 'el2', ['el1', ['el1', 'el2'], 'el4']];

function App() {
  return <NestedArrayRenderer array={sampleArray} />;
}

export default App;

代码说明 #

1. 递归逻辑：

   • 内部的renderItems函数负责处理每一层数组：遍历每个元素，遇到数组就递归调用自身，直到处理到最底层的非数组元素。
   • 递归的终止条件就是「元素不是数组」，此时直接渲染目标div。

2. key属性处理：

   • 对于嵌套数组，用nested-${index}作为key（index是当前元素在父数组中的位置）；
   • 对于普通元素，直接用item作为key（假设你的el1、el2等值是唯一的，如果有重复，可以改成${item}-${index}来保证唯一性）。

3. 结构匹配：
   代码里给每个嵌套数组包裹了一层<div>，完全对应你示例里的嵌套DOM结构。如果不需要这层额外的div，直接返回renderItems(item)即可（但要注意此时子元素的key还是要保证唯一）。

扩展提示 #

如果你的元素不是字符串（比如是对象），只需要调整渲染逻辑即可，比如：

// 假设元素是 { className: 'el1', content: '内容', id: 1 } 这种对象
return (
  <div key={item.id} className={item.className}>
    {item.content}
  </div>
);

内容的提问来源于stack exchange，提问作者Silverion