React.js：将道具传递给道具？

Question

I am learning React via an online course and have stumbled across a situation where a property is attached to another property like so:

this.props.property01(this.props.property02)

Seeing as the tutor only briefly addresses this line of code I cannot but remain baffled as to what this "concatenation" syntax actually stands for, ie what it causes behind the scenes. Coming from Vanilla JS it looks like property02 is being used as an argument for property01 but that seems too simple an answer. That being said, I understand the remaining code quite well.

To provide some context I have created this codepen in which the problem I refer to above is given by this.props.onDelete(this.props.whichItem); .

Seeing as I could not find any related questions, I would be grateful for some insightful elaboration on this one.

Answer 1

The properties of a React component can be functions. When I see:

this.props.property01(this.props.property02)

I think that:

• this.props.property01 is a function.
• this.props.property02 is passed to the function as an argument.

This means that the component would be used as:

<SomeComponent property01={(a) => { /* so something with "a" ... */ } property02={"someValue"} />

If property02 is only used to be passed to property01 and nothing else I would prefer something like:

<SomeComponent property01={(a) => { /* do something with "someValue" ... */ } />

Which means that there is no need for a property called poperty02 .

Answer 2

Coming from Vanilla JS it looks like property02 is being used as an argument for property01

That's it, you are correct.

this.props.property01(this.props.property02)

property01 is a method, property02, the argument.

A more elaborated explanation for anyone else looking at this:

Assume this line is in a component called MyComponent and property01 is a prop in MyComponent .

The parent component's render() method, would contain something like this:

<MyComponent property01={this.someMethod.bind(this)} />

Where someMethod belongs to that parent component but it becomes available as property01 in MyComponent (the child component).

Answer 3

If you can understand the basic react code this question will help you because in that code I passed props and state from parent component to the child component. You can play with it try to do whatever you want.

How to pass state from parent compont to child component in route (react-route-dom) reactjs