implicit-ref-delegation.js

import React, { Component } from "react";

class CustomComponent extends Component {
  constructor(props) {
    super(props);
    this.innerRef = props.innerRef || (() => null);
  }
  
  componentDidMount = () => {
    this.innerRef(this);
  }
  
  componentWillUnmount = () => {
    this.innerRef(null);
  }
  
  apiMethod() { /* ... */ }
}

const StyledCustomComponent = props => (
  <CustomComponent {...props} style={{ padding: 10 }} />
);

const EnhancedCustomComponent = props => (
  <StyledCustomComponent {...props} extraInfo={info} />
);

class ParentComponent extends Component {  
  handleClick = () => this.component.apiMethod();

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>call api method!</button>
        <EnhancedCustomComponent innerRef={r => this.component = r} />
      </div>
    );
  }
}