Kaedah Input Sah: Panduan untuk Kawalan Render Bersyarat

Question

Saya cuba memasukkan pemaparan bersyarat, tetapi ia memberi saya ralat: 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'.

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': ,
      '1': ,
      '2': ,
    }
    kembalikan komponen[langkah]
  }
kembali (
   {render()}
)
Bolehkah sesiapa membantu saya memahami cara menambah jenis untuk pemaparan bersyarat ini? 
Saya perlu memahami cara menambah jenis untuk pemaparan bersyarat ini
            

Answer 1

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

Answer 2

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