javascript - How to pass props to {this.props.children}
I'm trying to find the proper way to define some components which could be used in a generic way:
Parent
Child value="1"
Child value="2"
/Parent
There is a logic going on for rendering between parent and children components of course, you can imagine select and option as an example of this logic.
This is a dummy implementation for the purpose of the question:
var Parent = React.createClass({
doSomething: function(value) {
},
render: function() {
return (div{this.props.children}/div);
}
});
var Child = React.createClass({
onClick: function() {
this.props.doSomething(this.props.value); // doSomething is undefined
},
render: function() {
return (div onClick={this.onClick}/div);
}
});
The question is whenever you use {this.props.children} to define a wrapper component, how do you pass down some property to all its children?
React.Children: https://react.dev/reference/react/Chi...
React.cloneElement: https://react.dev/reference/react/clo...
source: react.dev: https://react.dev/reference/react/clo...
render props: https://react.dev/reference/react/clo...
