Valid Input Methods: A Guide to Conditional Rendering Controls
P粉550257856
2023-08-15 18:18:12
<p>I'm trying to enter conditional rendering, but it gives me the error: <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> Rendering is valid when everything is "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>Can anyone help me understand how to add types for this conditional rendering? </p>
<p>I need to understand how to add types for this conditional rendering</p>
When indexing an object, you need to use the
keyof
operator. From the TypeScript documentation:Your
step
has typenumber
and cannot be used to indextypes
becausetypes
only has1,2, 3
. So you can manually setstep
tokeyof types
:Since
step
is a number, you also need the key: