How can I access the ref of the BaseComponent or any level of the components?

Question

Original question: https://github.com/acdlite/recompose/issues/232

How can I access the ref of the BaseComponent or any level of the components?

Code:

class BaseComponent {
    doSth(){...}
}
const Component compose(...some)(BaseComponent);

class App {
    componentDidMount() {
        // undefined(doSth) is not a function
        this.refs.component.doSth();
    }
    render() {
        <Component ref="component" />
   }
}

Answer 1

You can use hoistStatic.

class BaseComponent {
  doSth(){...}
}

const enhance = compose(...some)

const Component = hoistStatics(enhance)(BaseComponent)

class App {
  componentDidMount() {
    this.refs.component.doSth()
  }
  render() {
    <Component ref="component" />
  }
}

You can find a real example in the test.