有效的輸入方法：條件渲染控制指南

Question

我正在嘗試輸入條件渲染，但是它報錯了：Element implicitly has an 'any' type because expression of type 'number' can't be used to index type 'types'. No index signature' can't be used to index type 'types'. No index signature with a parameter of type 'number' was found on type 'types'. 當所有內容都是"any"時，渲染是有效的。

interface types {
  '0': JSX.Element;
  '1': JSX.Element;
  '2': JSX.Element;
}

export default function Economy(props: any) {
  const [step, setStep] = useState(0)

  const render = () => {
    const component: types = {
      '0': <Home />,
      '1': <Create />,
      '2': <Detail />,
    }
    return component[step]
  }
return (
   {render()}
)

有人能幫我理解如何為這個條件渲染添加類型嗎？

我需要理解如何為這個條件渲染添加類型

Answer 1

當對一個物件進行索引時，你需要使用 keyof 運算子。 來自 TypeScript 文件：

interface types {
  '0': JSX.Element;
  '1': JSX.Element;
  '2': JSX.Element;
}

export default function Economy(props: any) {
  const [step, setStep] = useState<keyof types>("0")

  const render = () => {
    const component: types = {
      '0': <Home />,
      '1': <Create />,
      '2': <Detail />,
    }
    return component[step]
  }
return (
   {render()}
)

Answer 2

您的step有number類型，不能用於索引types，因為types只有1,2, 3。所以您可以手動將step設定為keyof types：

const [step, setStep] = useState<keyof types>(0)

由於step是一個數字，您還需要鍵：

interface types {
  0: JSX.Element;
  1: JSX.Element;
  2: JSX.Element;
}
 const component: types = {
      0: <Home />,
      1: <Create />,
      2: <Detail />,
    }
 return component[step] // 没有错误