<p>我正在尝试输入条件渲染,但是它报错了:<code>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'.</code> 当所有内容都是"any"时,渲染是有效的。</p>
<pre class="brush:php;toolbar:false;">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()}
)</pre>
<p>有人能帮我理解如何为这个条件渲染添加类型吗?</p>
<p>我需要理解如何为这个条件渲染添加类型</p>
当对一个对象进行索引时,你需要使用
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()} )您的
step具有number类型,不能用于索引types,因为types只有1,2,3。所以您可以手动将step设置为keyof types:由于
step是一个数字,您还需要键:interface types { 0: JSX.Element; 1: JSX.Element; 2: JSX.Element; } const component: types = { 0: <Home />, 1: <Create />, 2: <Detail />, } return component[step] // 没有错误