reactjs - TS2322: Type '{ text: string; }' kan ikke tildeles typen 'string'. mens du sender prop

Jeg prøver å sende en prop av typen string til en funksjonell komponent definert i samme fil, og det gir feilen:

TS2322: Typen '{ text: string; }' kan ikke tilordnes typen 'string'.

Jeg har prøvd forskjellige syntakser, men feilen ser ut til å være den samme.

const CircleText = (text: string): JSX.Element => (
    <p>{text}</p>
)

export default function Login(): JSX.Element {
return (
    <div>
        <h1>Login</h1>
        <CircleText text="testing"/>

    </div>
);
}

Svar #1

Props i en React-komponent må være et objekt, merk {} på den første linjen nedenfor:

const CircleText = ({text: string}): JSX.Element => (
    <p>{text}</p>
)

Svar #2

Det ser ut som dette også fungerer basert på https://www.pluralsight.com/guides/defining-props-in-react-function-component-with-typescript:

interface Title {
     text: string
 }
 const SemiCircleText = (props: Title): JSX.Element => (
     <p>{props.text}</p>
 )

Relaterte artikler