React如何基于API响应数据递归渲染多层嵌套列表项

你的代码无法渲染嵌套列表核心有三个原因：

1. 缺少递归逻辑：当list类型节点的子项依然是list类型时，现有逻辑只能处理纯文本/链接字符串，无法识别带type属性的嵌套节点
2. 字段兼容缺失：你给出的数据里，文本节点的内容字段有的叫content有的叫text，现有逻辑没有做适配
3. 数据结构兼容不足：Part3的list子项是纯字符串，Part2的list子项是带type的对象，现有逻辑没有做类型判断适配

import React from 'react'

const isAnchor = str => {
  return /^\<a.*\>.*\<\/a\>/i.test(str);
};

// 递归处理所有内容节点
const renderContentNode = (node) => {
  // 兼容纯字符串节点（如Part3的链接）
  if (typeof node === 'string') {
    return isAnchor(node) ? (
      <li dangerouslySetInnerHTML={{ __html: sanitize(node) }} />
    ) : (
      <li>{node}</li>
    );
  }
  const { type, content, text } = node;
  if (type === 'text') {
    // 优先取text字段，再取content字段适配两种数据结构
    return <li>{text || content}</li>
  }
  if (type === 'list') {
    // 嵌套列表递归渲染子节点
    return (
      <li>
        <ul>
          {content?.map((child, idx) => (
            <React.Fragment key={idx}>
              {renderContentNode(child)}
            </React.Fragment>
          ))}
        </ul>
      </li>
    )
  }
  return null;
};

const getDetailJsx = () => {
  return details.map(({ title, content }, index) => {
    return (
      <div key={`${title}${index}`}>
        <h6>
          <span>{title}</span>
        </h6>
        {content?.map(({ type: mainType, content: data }, idx) => (
          <div key={idx}>
            {mainType === "text" && <p>{data}</p>}
            {mainType === "list" && (
              <ul>
                {data?.map((child, childIdx) => (
                  <React.Fragment key={childIdx}>
                    {renderContentNode(child)}
                  </React.Fragment>
                ))}
              </ul>
            )}
          </div>
        ))}
      </div>
    );
  });
};

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

• 如果你使用React 17+的自动JSX转换，可以直接用<>代替React.Fragment
• 示例里的key用了索引，你可以根据实际业务替换成更稳定的唯一值避免渲染异常
• 代码已经兼容了你给出的所有数据结构变体，直接替换原有逻辑即可运行

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