javascript - Skicka ett nästlat objekt som React.Component props

Jag är säker på att detta har frågats tidigare men jag kan inte hitta det. Jag försöker skicka ett nästlat objekt som props till en React.Component-klass men jag får hela tiden detta fel:

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.

Jag har en App.tsx-fil skapad på detta sätt:

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;

Är den här sortens sak inte möjlig? Det verkar som att det borde vara det men kanske missar jag något. Finns det ett sätt att få något liknande att fungera eller ett korrekt mönster som jag inte använder? Tack!

Svar #1

Det finns inget "endaste" korrekt sätt att föra ett objekt vidare till en underordnad komponent, det finns flera tillvägagångssätt, ett av dem är följande (med ditt exempel):

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;

Svar #2

Jag är ganska säker på att för att detta ska fungera måste du ändra

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

TILL :

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

MEN, som Jack sa i kommentarerna, borde du ändå inte instansiera React-komponenter på det här sättet. Istället för att göra:

const card: Card = new Card(data);

Du borde bara göra:

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