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

itemprop="text">

I'm trying to find the proper way to
define some components which could be used in a generic
way:

            
             value="2">

There
is a logic going on for rendering between parent and children components of course, you
can imagine and 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 ({this.props.children}); }});var Child = React.createClass({ onClick: function() { this.props.doSomething(this.props.value); // doSomething is undefined }, render: function() { return ( onClick={this.onClick}>); }});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? Answer Cloning children with new propsYou can use href="https://reactjs.org/docs/react-api.html#reactchildren" rel="noreferrer">React.Children to iterate over the children, and then clone each element with new props (shallow merged) using href="https://reactjs.org/docs/react-api.html#cloneelement" rel="noreferrer">React.cloneElement e.g:const Child = ({ doSomething, value }) => ( doSomething(value)}>Click Me);class Parent extends React.PureComponent { doSomething = value => { console.log('doSomething called by child with value:', value); } render() { const childrenWithProps = React.Children.map(this.props.children, child => React.cloneElement(child, { doSomething: this.doSomething }) ); return {childrenWithProps} }};ReactDOM.render( value="2" /> , document.getElementById('container'));Fiddle: rel="noreferrer">https://jsfiddle.net/2q294y43/2/Calling children as a functionYou can also pass props to children with rel="noreferrer">render props. In this approach the children (which can be children or any other prop name) is a function which can accept any arguments you want to pass and returns the children:const Child = ({ doSomething, value }) => ( doSomething(value)}>Click Me);class Parent extends React.PureComponent { doSomething = value => { console.log('doSomething called by child with value:', value); } render() { return {this.props.children(this.doSomething)} }};ReactDOM.render( {doSomething => ( /> )} , document.getElementById('container'));Instead of or simply <> you can also return an array if you prefer.Fiddle: href="https://jsfiddle.net/ferahl/y5pcua68/7/" rel="noreferrer">https://jsfiddle.net/ferahl/y5pcua68/7/ - December 29, 2017 Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest No comments: Post a Comment Newer Post Older Post Home Subscribe to: Post Comments (Atom) php - file_get_contents shows unexpected output while reading a file I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print ... .image { width: 100%; } database - Android Studio: show username in textview with SQLite I have an app which needs a login and a registration with SQLite. I have the database and a user can login and register. But i would like th... regex - Splitting string and removing whitespace Python I would like to split a String by comma ',' and remove whitespace from the beginning and end of each split. For example, if I have ... How to solve the java.lang.ArrayIndexOutOfBoundsException: 1 >= 0 error in my java program? I got an error in my Java program. I think this happens because of the constructor is not intialized properly. My Base class Program public ... Search This Blog