Connected Components loose children's refs

[ghost]

Once a component is enhanced with kea it it's refs are gone.
Therefore this.props.children.ref is an empty object from the parent.

<Parent >
    <Child />
</Parent>

Neither facebook/react#8873
nor https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components
works here.

[mariusandra]

Hey, it's hard to answer your question without knowing exactly what it is that you're trying to do :).

Could you provide a more complete example that doesn't work? Here's a webpackbin you can play around with.

In any case, Kea delegates its "magic" to react-redux's connectAdvanced function, which in turn wraps the <Child /> inside <Connect><Child /></Connect>.

If you wrap everything with a <Parent>...</Parent> and really need to get the refs from within Child in Parent, it should be possible with callback refs, as described here.

The alternative is to extend kea and send { withRef: true } to connectAdvanced and then call this.refToChild.getWrappedInstance().refs from within Parent to get the Child's refs, as described here, however this increases complexity in the library and I'd prefer to not have to maintain this in the future. Callback refs should do the trick just fine.

[mariusandra]

closing due to inactivity