reactjs - 使用 TypeScript 将状态设置器传递给子级

Question

我有以下代码； 代码沙盒

应用程序.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>
  )
}

我的问题是 TS 抱怨 setAppDisplay 被键入为“任何”。使用以下代码：

export default function MainMenu({setAppDisplay} : IAppComponentProps) {
  return (
    <Wrapper>
      MainMenu
    </Wrapper>
  )
}

错误消失了，但 setAppDisplay 不应该从父级推断它的类型吗？

标签： reactjstypescript