Decorator shields public methods of a class

After decorating a dropdown:

@withStyles(style)
export default class UiDropdown

I’m no longer able to reference it:

this.dropdownRef.show() results in TypeError: this.dropdownRef.show is not a function

[droganov]

@ljharb let me repeat it once again 😃 it fails in both cases

<UiDropdown ref={...} /> — ref points to withStyles HOC when I expect it to point to the wrapped component i.e. UiDropdown.

And if I look here, I’m not able how find any ref delegation https://github.com/airbnb/react-with-styles/blob/master/src/withStyles.jsx#L45

I suggest it can be solved this way:

Example: In the following example we explore how to access instance methods and the instance itself of the WrappedComponent via refs

function refsHOC(WrappedComponent) {
  return class RefsHOC extends React.Component {
    proc(wrappedComponentInstance) {
      wrappedComponentInstance.method()
    }
    
    render() {
      const props = Object.assign({}, this.props, {ref: this.proc.bind(this)})
      return <WrappedComponent {...props}/>
    }
  }
}

[ljharb]

The only mechanism for communication is props. ref is a special prop that violates encapsulation. If you use literally any other prop name besides “key” or “ref”, I would expect what you want to work just fine.