将嵌套对象作为 React.Component 道具传递

Question

我确定之前有人问过这个问题，但我找不到了。我试图将嵌套对象作为道具传递给 React.Component class 但我一直收到此错误：

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;

这种事不可能吗？似乎应该如此，但也许我遗漏了一些东西。有没有办法让这样的东西工作或我没有使用的正确模式？谢谢！

Answer 1

我很确定你必须改变这个才能工作

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

收件人：

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

但是，就像 Jack 在评论中所说的那样，您无论如何都不应该像这样实例化 React 组件。而不是做：

const card: Card = new Card(data);

你应该这样做：

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

Answer 2

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

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;

将嵌套对象作为 React.Component 道具传递

Passing a Nested Object as React.Component Props

javascript

typescript

reactjs

tsx