React递归组件如何渲染对象值中的React元素？

return (<ReactIcon />)

错误原因拆解 #

1. Uncaught TypeError: Cannot convert undefined or null to object：递归遍历过程中，误将null/undefined或者React组件（如

   return (<ReactIcon />)
   

   ）当作普通对象处理，调用了Object.keys()或Object.entries()这类需要对象参数的方法，导致报错。
2. Functions are not valid as a React child：直接将React组件函数（而非组件实例）当作子元素渲染，或者递归逻辑中把函数类型的值直接输出了。

核心修复方案 #

修改递归组件的逻辑，增加类型判断，区分普通对象、React元素、基本类型值，避免错误遍历：

示例代码（RecursiveComponent.jsx）

import React from 'react';

const RecursiveComponent = ({ data }) => {
  // 处理数组：递归渲染每个元素
  if (Array.isArray(data)) {
    return (
      <div className="array-container">
        {data.map((item, idx) => (
          <RecursiveComponent key={idx} data={item} />
        ))}
      </div>
    );
  }

  // 直接渲染的情况：React元素、基本类型、null/undefined
  if (React.isValidElement(data) || typeof data !== 'object' || data === null) {
    return <span className="value-item">{data}</span>;
  }

  // 处理普通对象：遍历键值对递归渲染
  return (
    <div className="object-container">
      {Object.entries(data).map(([key, value]) => (
        <div key={key} className="key-value-pair">
          <span className="key-label">{key}: </span>
          <RecursiveComponent data={value} />
        </div>
      ))}
    </div>
  );
};

export default RecursiveComponent;

关键细节说明 #

• 用React.isValidElement(data)精准识别React组件实例（比如

  return (<ReactIcon />)
  

  ），直接跳过对象遍历逻辑，避免触发类型错误。
• 增加data === null和typeof data !== 'object'的判断，防止对非对象类型执行遍历操作。
• 所有分支都明确返回React元素，杜绝函数直接作为子元素输出的情况。

额外排查点 #

• 确认

  return (<ReactIcon />)
  

  组件是正确导出的（比如默认导出或命名导出，导入时路径正确）。
• 如果数据中存在独立的函数类型值，需额外处理：比如判断typeof data === 'function'时，返回空或提示文本，避免触发子元素警告。

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