javascript - Videregivelse af strengliteral som en enkelt prop i Typescript + React

Det ser ud til, at dette koncept er så grundlæggende, at der mangler dokumentation om det. Jeg kan sende objekter som props, men ser ud til ikke at kunne sende en simpel strengliteral.

Funktionel komponent

Jeg har en funktionel komponent, der tager en typet prop, sådan her:

const ChildComponent = (name: string) => {
    return (
        <div className={styles.childComponent}>
            <p className={styles.styledName}>
                { name }
            </p>
        </div>
    );
}

og kald det sådan:

<ChildComponent name="testName" />

Fejl

VSCode viser fejlen på ChildComponent:

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

Jeg er meget ny til Typescript, men ud fra hvad jeg kan se, læser det strengliteralet som et objekt.

Mulige løsninger

Meget af det, jeg har læst, anbefaler at oprette en brugerdefineret typet prop, selv for en enkelt egenskab, på denne måde:

Type: NameProp {
name: string
}

og bruge det som prop-type i stedet for string.

Er dette ikke overkill? Eller misser jeg noget helt grundlæggende.

Svar #1

const ChildComponent = ({ name }: { name: string }) => {
    return (
        <div className={styles.childComponent}>
            <p className={styles.styledName}>{name}</p>
        </div>
    );
};

Svar #2

Du skal destrukturere det fra props-objektet.

props er et objekt.

CODESADNBOX LINK

const ChildComponent = (props: ChildComponentProps) => {
    const { name } = props; // CHANGE THAT YOU HAVE TO DO
    return (
        <div className={styles.childComponent}>
            <p className={styles.styledName}>{name}</p>
        </div>
    );
};

eller

const ChildComponent = ({ name }: ChildComponentProps) => {
    return (
        <div className={styles.childComponent}>
            <p className={styles.styledName}>{name}</p>
        </div>
    );
};

hvor ChildComponentProps er