Cloner des composants fonctionnels dans React

Question

J'essaie de modifier et de cloner un élément enfant d'un composant que je crée et j'ai récemment remarqué un changement dans la façon dont mon children 类型根据我传递 children a changé >.

Par exemple, si je réussis JSX étant enfant :

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

Lorsque j'inspecte la MyComponent 中的 children structure, je peux voir l'objet comme suit :

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

Depuis props.children 存在，所以 React.cloneElement vous pouvez l'utiliser directement.

Si je crée un composant fonctionnel comme celui-ci :

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

Et essayez de l'utiliser comme ceci :

<MyComponent>
  <Hello/>
</MyComponent>

Ensuite, la structure de l'objet children devient comme ceci :

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

Je ne peux plus utiliser React.cloneElement，除非我调用children.type() mais je ne trouve pas beaucoup de documentation à ce sujet.

Pourquoi cela arrive-t-il ? Est-ce prévu ? L'appel de children.type() est-il le seul moyen de cloner un arbre entier d'éléments enfants ?

Answer 1

Hello

是一个 div， est une fonction qui renvoie un div , donc évidemment ce n'est pas la même chose. 有一个空对象作为 props，因为它没有子对象，而且我们没有向它传递一个带有值的属性，因此 props是 {}.

Ce à quoi vous voulez vraiment accéder et cloner, ce sont les enfants de l'élément JSX parent renvoyé, quels que soient leurs accessoires.
L'élément JSX parent renvoyé est en fait le children.type() (ce que la fonction renvoie) qui enveloppe les enfants (Bonjour), donc children.type().props.children est également présent ici, vous pouvez donc le cloner.