Gültige Eingabemethoden: Ein Leitfaden für bedingte Rendering-Steuerelemente
P粉550257856
P粉550257856 2023-08-15 18:18:12
0
2
530
<p>Ich versuche, bedingtes Rendering einzugeben, erhalte jedoch die folgende Fehlermeldung: <code>Element hat implizit einen „beliebigen“ Typ, da der Ausdruck vom Typ „Zahl“ nicht zum Indexieren von Typ „Typen“ verwendet werden kann. . Es wurde keine Indexsignatur mit einem Parameter vom Typ „Nummer“ für den Typ „Typen“ gefunden.</code> Die Darstellung ist gültig, wenn alles „beliebig“ ist. </p> <pre class="brush:php;toolbar:false;">Schnittstellentypen { '0': JSX.Element; '1': JSX.Element; '2': JSX.Element; } Export-Standardfunktion Economy(props: any) { const [step, setStep] = useState(0) const render = () => const-Komponente: Typen = { '0': <Home />, '1': <Erstellen />, '2': <Detail />, } Komponente zurückgeben[Schritt] } zurückkehren ( {machen()} )</pre> <p>Kann mir jemand helfen, zu verstehen, wie man Typen für dieses bedingte Rendering hinzufügt? </p> <p>Ich muss verstehen, wie man Typen für dieses bedingte Rendering hinzufügt</p>
P粉550257856
P粉550257856

Antworte allen(2)
P粉823268006

当对一个对象进行索引时,你需要使用 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()}
)
P粉008829791

您的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] // 没有错误
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage