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粉7446912052023-09-11 14:15:23
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.