Syntax response syntax for propagation syntax
In short :
What is the difference between these two versions:
const A = ({ children, ...rest }) => React.cloneElement(children, rest);
against
const B = ({ children, ...rest }) => React.cloneElement(children, {...rest});
Both versions work the same way.
This version doesn't work:
const C = ({ children, ...rest }) => React.cloneElement(children, { rest });
The question is in more detail :
... rest and relaxation
...rest
declared in the function definition of a component acts like a break parameter syntax, representing the rest of the props passed to the component.
eg: const B = ({ children, ...rest })
However ...rest
, which is passed as an argument:
eg: React.cloneElement(children, {...rest})
is the distribution syntax. Here it seems that we are also just cloning the child with the same props from the component function definition.
But how does component A work?
const A = ({ children, ...rest }) => React.cloneElement(children, rest);
How did we get from ...rest
to rest
?
Finally, why does it NOT work when surrounded by brackets like the C component
I've read the React documentation and ES6 docs, but there is no good documentation together
for using them using the React API.
source to share
{ ...rest }
effectively makes a shallow copy of the original object rest
. It retains its original shape, but it is a different reference point in memory.
rest
also obviously retains the same shape because it is the same object. You just pass the link.
{ rest }
doesn't work because it creates a new object and assigns the old object rest
as the value for the key "rest"
.
As an example for the above 3 scenarios, let's say your original form props
looks like this:
{
children: <div>,
label: 'Foo',
value: 5
};
After creating the object and passing it through the constructor, ( { children, ...rest }
) children
was split from rest
, leaving you with the following object:
{
label: 'Foo',
value: 5
};
With the { ...rest }
object remains the same shape:
{
label: 'Foo',
value: 5
};
With the rest
object remains not only the same shape, but literally the same object:
{
label: 'Foo',
value: 5
};
With { rest }
you assign the old rest
key "rest"
:
{
rest: {
label: 'Foo',
value: 5
},
};
Since the component expects the first form and does not expect properties under the key rest
, this last case fails as you noticed.
source to share
The function declaration actually uses destructuring along with rest parameters. In your example
const A = ({ children, ...rest }) => ...
function A takes an object as a parameter and breaks it down into separate variables, for example:
const A = ({ a, ...rest }) => { console.log('a', a, 'rest', rest) }
A({a: 1, b: 2, c: 'hello world'})
// a 1 rest Object {b: 2, c: "hello world"}
As you can see above, the variable is a
fetched from an object and assigned to a separate variable, and the spread operator is used to get the rest of the object's properties and resolve the object with those properties.
So what happens in your three cases?
const A = ({ children, ...rest }) => React.cloneElement(children, rest);
This object passes a React.cloneElement object with all the properties of an object without a property children
.
const B = ({ children, ...rest }) => React.cloneElement(children, {...rest});
This is equivalent to the first - it propagates the properties of the object to the object. This operation is really redundant.
const C = ({ children, ...rest }) => React.cloneElement(children, { rest });
This creates a new object with a property rest
to assign to the recreation object.
source to share