javascript - How can I pass propscontext to dynamic childrens in react? - Stack Overflow

admin管理员组

文章数量:1186254

I am using react, and I am trying to pass props/context to my dynamic childrens, by dymamic childrens I mean childrens are render using

{this.props.children}

How can I pass to this children (In my code I know it's type) context/props?

In this jsbin there is an example that it dosen't work on dynamic childrens. ,js,output

I am using react, and I am trying to pass props/context to my dynamic childrens, by dymamic childrens I mean childrens are render using

{this.props.children}

How can I pass to this children (In my code I know it's type) context/props?

In this jsbin there is an example that it dosen't work on dynamic childrens. http://jsbin.com/puhilabike/1/edit?html,js,output

• javascript
• reactjs

Share Improve this question Follow asked Feb 28, 2015 at 11:08 YosiYosi 2,96677 gold badges4343 silver badges6565 bronze badges 4

• 1 {this.props.children ...this.props} For ES < 6 just enumerate them all manually. – zerkms Commented Feb 28, 2015 at 11:17
• hi @zerkms how can you do this in es6 (using babel)? – Yosi Commented Feb 28, 2015 at 12:03
• @Yosi, the best answer here is to reorganize your code so you don't need to do this. – Brigand Commented Feb 28, 2015 at 12:17
• 1 @zerkms - As far as I can tell, that doesn't actually generate code that behaves correctly as the compiled JSX will pass the remainder of the props as something to render, not as actual props. – WiredPrairie Commented Feb 28, 2015 at 16:39

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 18

Though @WiredPrairie's answer is correct, the React.addons.cloneWithProps is deprecated as of React v0.13RC. The updated way to do this is to use React.cloneElement. An example:

renderedChildren = React.Children.map(this.props.children, function (child) {
 return React.cloneElement(child, { parentValue: self.props.parentValue });
});

There's not a a great way to do this that is clear and passing all the properties of the parent isn't a great pattern and could lead to some very difficult to follow code if not done carefully (and with excellent documentation). If you have a subset of properties though, it's straightforward:

JsFiddle

Assuming you're using React with Addons, you can clone the children of a React component and set new property values on them. Here, the code just copies a property called parentValue into each child. It needs to create a clone of each element as the child element had already been created.

var Hello = React.createClass({
    render: function() {
        var self = this;
        var renderedChildren = React.Children.map(this.props.children,
            function(child) {
                // create a copy that includes addtional property values
                // as needed
                return React.addons.cloneWithProps(child, 
                    { parentValue: self.props.parentValue } );                
            });
        return (<div>
            { renderedChildren }            
        </div>)
        ;
    }
});

var SimpleChild = React.createClass({
    render: function() {
        return <div>Simple { this.props.id }, from parent={ this.props.parentValue }</div>
    }
});

React.render((<Hello parentValue="fromParent">
    <SimpleChild id="1" />
    <SimpleChild id="2" />
</Hello>), document.body);

Produces:

Simple 1, from parent=fromParent
Simple 2, from parent=fromParent

Spreading props on DOM elements

https://github.com/vasanthk/react-bits/blob/master/anti-patterns/07.spreading-props-dom.md

When we spread props we run into the risk of adding unknown HTML attributes, which is a bad practice.

const Sample = () => (<Spread flag={true} domProps={{className: "content"}}/>);
const Spread = (props) => (<div {...props.domProps}>Test</div>);

本文标签： javascriptHow can I pass propscontext to dynamic childrens in reactStack Overflow