reactjs - Type '{ name: string; }' kan ikke tildeles typen 'ReactNode'

Jeg vil rendre navn som ligger i staten. Men jeg får denne feilen: Type '{ name: string; }' is not assignable to type 'ReactNode'. Jeg forstår at ReactNode ikke kan tildeles et objekt, men finnes det noe alternativ til ReactNode, eller hva er beste praksis?

Takk på forhånd, det er første gangen jeg gjør noe i React og TypeScript

Her er koden min:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { ReactNode } from "react";

interface State {
  monster1: {
    name: string;
  };
  monster2: {
    name: string;
  };
  monster3: {
    name: string;
  };
}

interface Props {}

class App extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      monster1: {
        name: "Linda",
      },

      monster2: {
        name: "Frank",
      },

      monster3: {
        name: "Jacky",
      },
    };
  }

  override render(): JSX.Element {
    {
      return (
        <div className="App">
          <div>
            <h1>{this.state.monster1}</h1>
            <h1>{this.state.monster2}</h1>
            <h1>{this.state.monster3}</h1>
          </div>
        </div>
      );
    }
  }
}

export default App;

Svar #1

this.state.monster1 er et objekt med en egenskap name. React tillater ikke at du renderer objekter. Du bør få tilgang til name-egenskapen (som holder en renderbar streng) i stedet:

<h1>{this.state.monster1.name}</h1>
<h1>{this.state.monster2.name}</h1>
<h1>{this.state.monster3.name}</h1>

Svar #2

Du bør rett og slett returnere JSX-en din (ikke innenfor et objekt). Grunnen til at du ser denne feilmeldingen er fordi Typescript egentlig sier: "hei, du sa til meg at jeg skulle forvente at en JSX.Element skulle returneres, men i stedet returnerer du noe annet (altså et objekt)."

Med alt dette sagt er løsningen på problemet ditt:

override render(): JSX.Element {
    return (
        <div className="App">
            <div>
                <h1>{this.state.monster1}</h1>
                <h1>{this.state.monster2}</h1>
                <h1>{this.state.monster3}</h1>
            </div>
        </div>
    );
}

Relaterte artikler