ReactTransitionGroup overwrites children's ref prop

[alexkirsz]

ReactTransitionGroup uses cloneWithProps on each of its children and overwrites their ref prop (see here).

[syranide]

cloneWithProps discards ref regardless (it's necessary, but not intentional). However, I guess ReactTransitionGroup could really just wrap it in an internal identity component and ref that instead, <Identity ref="...">{child}</Identity>.

[duro]

I think this could possibly be solved with the new React.cloneElement method. I'm trying to work on migrating ReactTransitionGroup to use it, but I am a super noob to the React source, so it's going to be slow going. Any help from the React team that I can get would be much appreciated.

[sophiebits]

@duro That unfortunately won't work in this case because ReactTransitionGroup needs a ref to the element too (so you can't just keep the old one). @syranide's suggestion of creating a wrapper should work though.

[duro]

@spicyj Something needs to happen, because right now ReactTransitionGroup is practically unusable when used in combination with something like react-router, and passing props from the parent component down to the children.

I've been tearing my hair out trying to get it to work for days.

[duro]

If anyone cares to take a look at the project where I am having this problem it is here:

https://github.com/zehnergroup/zg-site-frontend/tree/transitions

The specific file where ReactTransitionGroup is implemented is here

[alexkirsz]

With the new callback refs introduced in React 0.13, you can now clone an element and conserve its ref. Here's an example implementation, where all ref props are considered to be functions.

function cloneWithRef(element, ref) {
    return React.cloneElement(element, {
        ref: function(component) {
            ref(component);
            element.ref(component);
        }
    });
}

var Child = React.createClass({
    componentDidMount: function() {
        console.log('Child', this.c);
    },
    render: function() {
        var child = React.Children.only(this.props.children);
        return cloneWithRef(child, (c) => this.c = c);
    }
});

var Wrapper = React.createClass({
    componentDidMount: function() {
        console.log('Wrapper', this.c);
    },
    render: function() {
        return (
            <Child>
                <div ref={(c) => this.c = c} />
            </Child>
        );
    }
});

And here's a JSFiddle.

If this pattern is considered okay, I might have a go at implementing it in ReactTransitionGroup.

[duro]

I'd love to get my hands on this implementation.

[AlexGalays]

This can be closed I think?

[sophiebits]

I believe this still is broken (using cloneElement now instead of cloneWithProps).

[AlexGalays]

Got it, I thought the wrapper was in place already.

[victorteokw]

This is still broken.

[egzplicit-bbc]

Still broken :(