Possible to assign a ref to UI component?

Trying to refactor a component to a contained/pure pair. This is a web RTC component, so at some point I need to attach audio/video streams to <video/> elements contained in the UI. In order to keep the component pure, this needs to be done in the container logic.

Is there any way to render the UI component with a known, fixed ref? Then I could call this.refs.ui.refs.localVideo or this.refs.ui.refs.remoteVideo to get access to the contained video elements. I recognize this is ugly, but the only other way I can think to do this is to assign ids to the video elements, and that’s even uglier. 😃 Open to any other suggestions on how the container component can access elements in the UI component. I can almost guarantee the UI component will be mounted and visible at the point where the elements need to be accessed, so I’m not concerned about it not being available at time of use.

Thanks.

[minfawang]

@shoetten This article describes exactly this use case: https://medium.com/@erikras/the-hoc-drill-pattern-a676a3889ced?source=linkShare-9614e68f389f-1465831073

[clayne11]

PR is done.