Home  >  Q&A  >  body text

Clone functional components in React

I'm trying to modify and clone the child elements of a component I'm creating and recently noticed that my children type changes depending on how I pass children>.

For example, if I pass JSX as a child:

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

When I inspect the children structure in MyComponent, I can see the object as follows:

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

Since props.children exists, React.cloneElement can use it directly.

If I create a functional component like this:

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

and try to use it like this:

<MyComponent>
  <Hello/>
</MyComponent>

Then the structure of the children object becomes like this:

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

I can no longer use React.cloneElement unless I call children.type(), but I can't find much documentation on that.

Why does this happen? Is this expected? Is calling children.type() the only way to clone the entire tree of children?

P粉851401475P粉851401475425 days ago474

reply all(1)I'll reply

  • P粉744691205

    P粉7446912052023-09-11 14:15:23

    Hello
    is a div and is a function that returns a div, so obviously they are not the same thing. < br> There is an empty object as props because it has no child objects and we are not passing it a property with a value, so props is {}.

    What you really want to access and clone are the child elements of the parent JSX element returned, regardless of their props.
    The parent JSX element returned is actually children.type() (what the function returns) which has the children wrapped in it (Hello), so children.type().props.children< /code> is also present here so you can clone it.

    reply
    0
  • Cancelreply