reactjs - React + Typescript: props fra `cloneElement` kun

Jeg har en React-komponent <MyComponent> som tar props av typen Props:

interface Props {
    name: string;
    age: number;
    greeting: () => string;
}

export const MyComponent = ({ name, age, greeting }: Props): ReactElement => {
   ...
}

Men, MyComponent er alltid et barn av WrapperComponent, som er der greeting blir sendt inn:

export const WrapperComponent = ({children}) => {
    const thisGreeting = (): void => { console.log('Hello!'); }
    return (
        <div className="wrapper">
            {
                Children.map((child) => cloneElement(child, {greeting: thisGreeting}))
            }
        </div>
    );
}

Jeg komponerer for øyeblikket WrapperComponent og MyComponent på denne måten:

<WrapperComponent>
    <MyComponent 
        name="me"
        age={99}
    />
</WrapperComponent>

Dette gir en feil, fordi MyComponent mangler greeting, men jeg vet at det vil være der til slutt. greeting er avhengig av den spesifikke forekomsten av WrapperComponent, og derfor er det satt opp på denne måten.

1. Dette føles som et lite anti-mønster, siden MyComponent ikke (for øyeblikket) kan brukes utenfor WrapperComponent - finnes det en bedre måte?
2. Hvis ikke (anti-mønster og/eller en bedre måte), finnes det en måte å overbevise TypeScript om at greeting vil komme dit til slutt?

Svar #1

Du kan erklære greeting-propen som valgfri i Props-grensesnittet. Og sett en standard argumentverdi for den.

interface Props {
    name: string;
    age: number;
    greeting?: () => string;
}

export const MyComponent = ({ name, age, greeting = () => "" }: Props): ReactElement => {
   ...
}```

Svar #2

// @ts-expect-error er renere etter min mening

… eller hvis du føler dette er for løst, prøv da:

<WrapperComponent>
    <MyComponent 
        name = { undefined as unknown as string }
        age  = { undefined as unknown as number }
    />
</WrapperComponent>