传递嵌套对象作为React.Component的props时出现报错如何解决？

你遇到的报错和嵌套对象作为Props传入组件没有关联，核心错误是手动调用new Card(data)创建类组件的实例对象，再将该普通对象直接作为React子节点渲染，React并不接受类实例对象作为可渲染的子元素，因此抛出对应错误。

嵌套对象作为Props是React完全支持的用法，你的需求本身不存在实现障碍，只是实例化组件的方式不符合React的开发规范。

React的类组件、函数组件都需要通过JSX语法声明使用，组件的实例创建、生命周期管理、DOM渲染都由React内部统一调度，开发者仅需要通过JSX属性传入Props即可。
修改App组件的代码如下：

function App() {
    const data: any = {
         "id": 1,
         "child": {
              "id": 2
         }
    }

    return (
        <div className="app">
              {/* 可二选一传递Props */}
              {/* 方式1：逐个传入Props */}
              <Card id={data.id} child={data.child} />
              {/* 方式2：展开对象批量传入Props */}
              {/* <Card {...data} /> */}
        </div>
    );
}

你原本编写的Card组件的类型定义、嵌套Props读取逻辑完全符合规范，无需修改。

• 禁止手动实例化React类组件，所有组件统一通过JSX语法声明渲染
• Props支持任意合法JS数据类型，包括基础类型、对象、数组、函数等，无嵌套层级限制
• 仅可渲染节点（JSX元素、字符串、数字、合法子节点数组等）可以放在JSX的大括号{}中直接渲染

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