reactjs - Skicka stat-hanterare till barn med TypeScript
Jag har följande kod; CodeSandbox
App.tsx:
interface IAppDisplayMap {
[key: string]: (props : IAppComponentProps) => JSX.Element
}
interface IAppComponentProps {
setAppDisplay: React.Dispatch<React.SetStateAction<string>>
}
const appDisplayMap : IAppDisplayMap = {
"MainMenu": MainMenu
}
export default function App() {
const [appDisplay, setAppDisplay] = useState("MainMenu");
const AppComponent = useMemo(() => appDisplayMap[appDisplay], [appDisplay]);
return (
<Wrapper>
{AppComponent ? <AppComponent setAppDisplay={setAppDisplay} /> : "Invalid AppComponent"}
</Wrapper>
)
}
MainMenu.tsx:
export default function MainMenu({setAppDisplay}) {
return (
<Wrapper>
MainMenu
</Wrapper>
)
}
Mitt problem är att TS klagar på att setAppDisplay är typat som 'Any'. Med följande kod:
export default function MainMenu({setAppDisplay} : IAppComponentProps) {
return (
<Wrapper>
MainMenu
</Wrapper>
)
}
Felet försvinner, men borde inte setAppDisplay härleda dess typ från föräldern ändå?