有效的输入方法：条件渲染控制指南

Question

我正在尝试输入条件渲染，但是它报错了：Element implicitly has an 'any' type because expression of type 'number' 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] // 没有错误