score:1

Accepted answer

Have your child component a prop with method onRef like follows:

class Child extends Component {
  componentDidMount() {
    this.props.onRef(this);
  }

  render() {
    return (
      <h1 ref={(ref) => { this.ref = ref }}>Hello</h1>
    );
  }
}  

Then in your parent method you can access Child ref using callback as follows:

class Parent extends Component {
  onClick() {
    console.log(this.childHoc) // here access the withStyle ref
    console.log(this.actualChild) // here access the actual Child Component ref
  }
  render() {
    return (
      <div>
        <Child ref={childHoc => this.childHoc = childHoc} onRef={actualChild => this.actualChild = actualChild} />
        <button onClick={this.onClick.bind(this)}>Click</button>
      </div>
    );
  }
}

score:2

You can make use of an innerRef prop and use it to get the ref of the child like

class Child extends Component {
 componentDidMount() {
    this.props.innerRef(this);
 }
 render() {
  return (
    <h1 ref={(ref)=>{this.ref = ref}}>Hello</h1>
  );
 }
}

export default withStyles(s)(Child);

and in parent

class Parent extends Component {
 onClick() {
    console.log(this.child) // here access the ref
    console.log(this.child.ref) // undefined
 }
 render() {  
  return (
    <div>
      <Child innerRef={child => this.child = child} />
      <button onClick={this.onClick.bind(this)}>Click</button>
    </div>
  );
 }
}

Related Query

More Query from same tag