P粉6623617402023-08-15 00:12:54
The behavior you observe is actually expected and is not affected by the presence or absence of ...others
in the NullComp
function. The key thing to note is that the NullComp
function is not used or called in the provided code, so it does not affect the output of the GoalComp
function.
Let’s analyze what happened:
In the GoalComp
function, you use destructuring to extract the id
, ticket
, and request
properties in props. The remaining properties (if any) are collected into a props
object using the spread operator ...props
.
When you render the GoalComp
component in the App
component, you pass the following props:
className="mt-10"
id="1"
ticket="IT-ABCD"
request="Peace and Love"
In this case, when these props are passed to GoalComp
, the id
, ticket
and request
properties are extracted , the remaining className
properties are collected into the props
object. That's why when you console.log(props)
you see an object with only one property: { className: "mt-10" }
.
...others in the
NullComp
function is irrelevant in this context. Since NullComp
is not used, whether it has ...others
will not affect the output of the GoalComp
function.
In summary, the code works as expected. Under no circumstances will the NullComp
function affect the output of the GoalComp
function.
Hope this helps!