Klon komponen berfungsi dalam React
P粉851401475
P粉851401475 2023-09-10 17:44:34
0
1
373

Saya cuba mengubah suai dan mengklon elemen kanak-kanak bagi komponen yang saya buat dan baru-baru ini melihat perubahan dalam carachildren类型根据我传递childrensaya berubah >.

Sebagai contoh, jika saya lulus JSX semasa kecil:

 
Hello

Apabila saya memeriksa strukturMyComponent中的children, saya dapat melihat objek seperti berikut:

{ '$$typeof': Symbol(react.element), type: 'div', key: null, ref: null, props: { children: 'hello' }, _owner: null, _store: {} }

Sejakprops.children存在,所以React.cloneElementanda boleh menggunakannya terus.

Jika saya mencipta komponen berfungsi seperti ini:

const Hello: React.FC = () => 
hello
;

Dan cuba gunakannya seperti ini:

  

Kemudian struktur objekchildrenmenjadi seperti ini:

{ '$$typeof': Symbol(react.element), type: [Function: Hello], key: null, ref: null, props: {}, _owner: null, _store: {} }

Saya tidak lagi boleh menggunakanReact.cloneElement,除非我调用children.type()tetapi saya tidak dapat mencari banyak dokumentasi mengenainya.

Mengapa ini berlaku? Adakah ini dijangkakan? Adakah memanggilchildren.type()satu-satunya cara untuk mengklon seluruh pokok unsur kanak-kanak?

P粉851401475
P粉851401475

membalas semua (1)
P粉744691205

Hello
是一个 div, ialah fungsi yang mengembalikan div , jadi jelas ia bukan perkara yang sama. 有一个空对象作为 props,因为它没有子对象,而且我们没有向它传递一个带有值的属性,因此 props{}.

Apa yang anda benar-benar ingin akses dan klon ialah anak-anak elemen JSX induk yang dikembalikan, tanpa mengira prop mereka.
Elemen JSX induk yang dikembalikan sebenarnya ialahchildren.type()(fungsi yang dikembalikan) yang membalut kanak-kanak di dalamnya (Hello), jadichildren.type().props.children turut hadir di sini supaya anda boleh mengklonkannya.

    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!