javascript - How to pass props to {this.props.children}

Published: 13 April 2024
on channel: Code Samples
134
1

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...


Watch video javascript - How to pass props to {this.props.children} online without registration, duration hours minute second in high quality. This video was added by user Code Samples 13 April 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 13 once and liked it people.