wrapper.js

class MyWrapper {
  return React.Children.only(this.props.children);
}


class MyLibraryComponent {
  render() {
    return <div><span><whatever><MyWrapper ref=...>{this.props.statelessComponentThatIWantToReference}</MyWrapper></whatever></span></div>;
  }
}

// ReactDOM.findDOMNode(mywrapperref) effectively returns a reference to the stateless component.
// You can find the DOM node of the stateless component, etc.
// It no longer matters if your users are using stateless components or real components.

Thanks for this. It helped me sort out my HOC nicely!

@ctrlplusb @jimfb Is there a more comprehensive example of this design pattern somewhere? I'm having a hard time implementing this.

For posterity: @ctrlplusb's react-sizeme is a good example of this design pattern: https://github.com/ctrlplusb/react-sizeme/blob/master/src/sizeMe.js (thanks Sean!)