Rumah  >  Soal Jawab  >  teks badan

Kaedah Input Sah: Panduan untuk Kawalan Render Bersyarat

<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粉550257856P粉550257856455 hari yang lalu484

membalas semua(2)saya akan balas

  • P粉823268006

    P粉8232680062023-08-16 16:02:42

    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()}
    )

    balas
    0
  • P粉008829791

    P粉0088297912023-08-16 14:40:17

    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] // 没有错误

    balas
    0
  • Batalbalas