Kaedah Input Sah: Panduan untuk Kawalan Render Bersyarat
P粉550257856
P粉550257856 2023-08-15 18:18:12
0
2
531
<p>Saya cuba memasukkan pemaparan bersyarat, tetapi ia memberi saya ralat: <kod>Elemen secara tersirat mempunyai jenis 'mana-mana' kerana ungkapan jenis 'nombor' tidak boleh digunakan untuk mengindeks jenis 'jenis' . Tiada tandatangan indeks dengan parameter jenis 'nombor' ditemui pada jenis 'jenis'.</kod> </p> <pre class="brush:php;toolbar:false;">jenis antara muka { '0': JSX.Element; '1': JSX.Element; '2': JSX.Element; } eksport fungsi lalai Ekonomi(props: any) { const [langkah, setStep] = useState(0) const render = () => komponen const: jenis = { '0': <Laman Utama />, '1': <Buat />, '2': <Butiran />, } kembalikan komponen[langkah] } kembali ( {render()} )</pra> <p>Bolehkah sesiapa membantu saya memahami cara menambah jenis untuk pemaparan bersyarat ini? </p> <p>Saya perlu memahami cara menambah jenis untuk pemaparan bersyarat ini</p>
P粉550257856
P粉550257856

membalas semua(2)
P粉823268006

Apabila mengindeks objek, anda perlu menggunakan operator keyof. Daripada dokumentasi 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

Andastep具有number类型,不能用于索引types,因为types只有1,2,3。所以您可以手动将step设置为keyof types:

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

Memandangkan step ialah nombor, anda juga memerlukan kunci:

interface types {
  0: JSX.Element;
  1: JSX.Element;
  2: JSX.Element;
}
 const component: types = {
      0: <Home />,
      1: <Create />,
      2: <Detail />,
    }
 return component[step] // 没有错误
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan