Saya cuba mengubah suai dan mengklon elemen kanak-kanak bagi komponen yang saya buat dan baru-baru ini melihat perubahan dalam carachildren
类型根据我传递children
saya 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.cloneElement
anda boleh menggunakannya terus.
Jika saya mencipta komponen berfungsi seperti ini:
const Hello: React.FC = () =>hello;
Dan cuba gunakannya seperti ini:
Kemudian struktur objekchildren
menjadi 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?
Hello
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 ialah
children.type()
(fungsi yang dikembalikan) yang membalut kanak-kanak di dalamnya (Hello), jadichildren.type().props.children turut hadir di sini supaya anda boleh mengklonkannya.