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