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?