将嵌套对象作为 React.Component Props 传递答案

【问题标题】：Passing a Nested Object as React.Component Props将嵌套对象作为 React.Component Props 传递
【发布时间】：2021-11-09 05:29:39
【问题描述】：

我确定以前有人问过这个问题，但我找不到。我正在尝试将嵌套对象作为道具传递给 React.Component 类，但我不断收到此错误：

react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {props, context, refs, updater}). If you meant to render a collection of children, use an array instead.

我有一个这样创建的 App.tsx 文件：

import React from "react";

export type Child = {
    id: number
}

export type Parent = {
    id: number,
    child: Child
}

export class Card extends React.Component<Parent> {
    render() {
         return <div>
              Parent ID: {this.props.id}
              Child ID: {this.props.child.id}
         </div>;
    }
}

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

    return (
        <div className="app">
              {card}
        </div>
    );
}

export default App;

这种事情不可能吗？看起来应该是，但也许我错过了一些东西。有没有办法让这样的工作或我没有使用的正确模式？谢谢！

【问题讨论】：

你为什么要创建这样的组件const card: Card = new Card(data); 你可以只使用 JSX <Card id={1} child={{ id: 2}} /> 并传递道具
谢谢，只是没有 React 经验而已。

标签： javascript reactjs typescript tsx

【解决方案1】：

将对象传递给子组件没有“一种”正确的方法，有多种方法，其中一种方法如下（使用您的示例）：

import React from "react";

export type Child = {
    id: number
}

export type Parent = {
    id: number,
    child: Child
}

export class Card extends React.Component<Parent> {
    render() {
         return <div>
              Parent ID: {this.props.id}
              Child ID: {this.props.child.id}
         </div>;
    }
}

function App() {
    const data: any = {
         "id": 1,
         "child": {
              "id": 2
         }
    }
    
 
    return (
        <div className="app">
              <Card  {...data} />
        </div>
    );
}

export default App;

【讨论】：

是的，非常感谢！另一个人先回应，所以给了他支票。

【解决方案2】：

我很确定要让这个工作你必须改变

<div className="app">
    {card}
</div>

到：

<div className="app">
    <card />
</div>

但是，就像 Jack 在 cmets 中所说的那样，你不应该像这样实例化 React 组件。而不是这样做：

const card: Card = new Card(data);

你应该这样做：

<div className="app">
    <Card {...data} />
</div>

【讨论】：