在 React 中克隆功能元件

Question

我試圖修改和複製我正在建立的元件的子元素，最近注意到我的 children 類型根據我傳遞 children 的方式而發生變化>.

例如，如果我將 JSX 當作孩子傳遞：

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

當我檢查 MyComponent 中的 children 結構時，我可以看到該物件如下：

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

由於 props.children 存在，所以 React.cloneElement 可以直接使用它。

如果我創建一個像這樣的功能元件：

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

並嘗試像這樣使用它：

<MyComponent>
  <Hello/>
</MyComponent>

那麼children物件的結構就變成這樣了：

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

我不能再使用React.cloneElement，除非我呼叫children.type()，但我找不到太多相關文件。

為什麼會發生這種情況？這是預期的嗎？呼叫 children.type() 是克隆整個子元素樹的唯一方法嗎？

Answer 1

Hello

是 div， 是一個傳回 div 的函數，所以顯然它們不是同一件事。 有一個空物件作為props，因為它沒有子對象，而且我們沒有向它傳遞一個帶有值的屬性，因此props是{}。

您真正想要存取和複製的是 傳回的父 JSX 元素的子元素，這與其 props 無關。
傳回的父JSX 元素實際上是children.type() （函數傳回的內容）該元素將childs 包裹在其中（Hello），因此children.type().props.children 也存在於此，因此您可以克隆它。