Mengapa saya tidak boleh menghantar maklumat jenis semasa menggerudi ke dalam prop apabila menggunakan React dan TypeScript?
P粉776412597
P粉776412597 2023-09-14 17:35:21
0
1
508

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粉776412597
P粉776412597

membalas semua(1)
P粉761718546

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!