Rumah  >  Soal Jawab  >  teks badan

Mengapa saya tidak boleh menghantar maklumat jenis semasa menggerudi ke dalam prop apabila menggunakan React dan TypeScript?

Saya sudah lama pengguna React tetapi sedang cuba mempelajari TypeScript.

Dalam React, apabila anda perlu menghantar prop merentasi beberapa peringkat, mengapa jenis yang ditakrifkan oleh komponen induk peringkat atas tidak kekal dalam prop? Nampaknya mengecewakan untuk mentakrifkan semula jenis pada komponen induk dan semua komponen anak yang melepasi pembolehubah.

Sebagai contoh, saya menentukan pembolehubah Negeri pada komponen induk dan menambah jenisnya, kemudian menyerahkannya kepada komponen anak. Dalam prop komponen kanak-kanak saya mendapat ralat mengatakan: Binding element 'var name' implicitly has an 'any' type. Jadi saya sama ada perlu mentakrifkan semula jenis pada komponen kanak-kanak atau mengeksport jenis dan mengimportnya dalam komponen kanak-kanak.

Nampak banyak kerja tambahan. Adakah saya melakukan sesuatu yang salah?

P粉776412597P粉776412597424 hari yang lalu509

membalas semua(1)saya akan balas

  • P粉761718546

    P粉7617185462023-09-15 12:24:42

    Apakah hubungan antara jenis keadaan dan jenis atribut? Tiada hubungan tersirat antara keduanya, jadi ia perlu ditakrifkan di kedua-dua tempat.

    Jika komponen itu berdiri sendiri, ia boleh digunakan dalam mana-mana komponen induk, jadi ia tidak boleh mendapatkan maklumat daripada mana-mana keadaan induk tertentu.

    Agak biasa untuk mengelompokkan jenis dalam modul mereka sendiri...

    // types.ts
    
    interface User {
      id: number;
      name: string;
    }
    
    export type { User };
    
    // Child.tsx
    
    import type { User } from "./types";
    
    interface ChildProps {
      user: User; // 定义属性类型
    }
    
    const Child = ({ user }: ChildProps) => {
      return <p>你好,{user.name}</p>;
    }
    
    export default Child;
    
    // Parent.tsx
    
    import type { User } from "./types";
    import Child from "./child";
    
    const Parent = () => {
      // 在状态中使用 User 类型
      const [user, setUser] = useState<User>({ id: 1, name: "Joe" });
    
      return <Child user={user} />;
    };
    

    Sila ambil perhatian bahawa sifat komponen adalah sebahagian daripada kontraknya. Komponen induk tidak boleh menggunakan komponen anak tanpa memberikan nilai harta yang memenuhi jenis yang ditentukan.

    balas
    0
  • Batalbalas