Klon komponen berfungsi dalam React

Question

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

Sebagai contoh, jika saya lulus JSX semasa kecil:

<MyComponent>
  <div>Hello</div>
</MyComponent>

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

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

Sejak props.children 存在，所以 React.cloneElement anda boleh menggunakannya terus.

Jika saya mencipta komponen berfungsi seperti ini:

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

Dan cuba gunakannya seperti ini:

<MyComponent>
  <Hello/>
</MyComponent>

Kemudian struktur objek children menjadi seperti ini:

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

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

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

Answer 1

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 ialah children.type() (fungsi yang dikembalikan) yang membalut kanak-kanak di dalamnya (Hello), jadi children.type().props.children turut hadir di sini supaya anda boleh mengklonkannya.