Klonen Sie funktionale Komponenten in React

Question

Ich versuche, ein untergeordnetes Element einer Komponente, die ich erstelle, zu ändern und zu klonen, und habe kürzlich eine Änderung in der Art und Weise festgestellt, wie sich mein children 类型根据我传递 children geändert hat >.

Zum Beispiel, wenn ich als Kind JSX bestanden habe:

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

Wenn ich die MyComponent 中的 children Struktur inspiziere, kann ich das Objekt wie folgt sehen:

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

Seit props.children 存在，所以 React.cloneElement können Sie es direkt verwenden.

Wenn ich eine funktionale Komponente wie diese erstelle:

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

Und versuchen Sie es so:

<MyComponent>
  <Hello/>
</MyComponent>

Dann sieht die Struktur des children-Objekts so aus:

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

Ich kann es nicht mehr verwenden React.cloneElement，除非我调用children.type(), aber ich kann nicht viel Dokumentation darüber finden.

Warum passiert das? Ist das zu erwarten? Ist der Aufruf von children.type() die einzige Möglichkeit, einen gesamten Baum untergeordneter Elemente zu klonen?

Answer 1

Hello

是一个 div， 是一个返回 div 的函数，所以显然它们不是同一件事。 有一个空对象作为 props，因为它没有子对象，而且我们没有向它传递一个带有值的属性，因此 props是 {}。

您真正想要访问和克隆的是 返回的父 JSX 元素的子元素，这与其 props 无关。
返回的父 JSX 元素实际上是 children.type() （函数返回的内容）该元素将 childs 包裹在其中（Hello），因此 children.type().props.children 也存在于此，因此您可以克隆它。