What’s the proper way of passing a ref to a prop?

In general the “ref” feature is an anti-pattern in React. It exists to enable side-effect driven development, however in order to benefit the most from the React way of programming you should try to avoid “refs” if possible.

As for your particular issue, passing a child a ref to it’s sibling is a chicken vs. egg scenario. The ref callback is fired when the child is mounted, not during render which is why your example doesn’t work. One thing you can try is pushing the ref into state and then reading from state into the other child. So:

<One ref={c => !this.state.one && this.setState({ one: c })}/>
<Two one={this.state.one}/>

Note: without the !this.state.one this will cause an infinite loop.

Here is a codepen example of this working (look at the console to see the sibling ref logged): http://codepen.io/anon/pen/pbqvRA

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)