Add ref for ComposedComponent

[jasonsanjose]

Expose ref for the ComposedComponent to enable workflows that require ReactDOM.findDOMNode() on the WithStyles wrapper.

[koistya]

@jasonsanjose thanks for the PR! How would a test case for it look like?

[jasonsanjose]

Trying to get jsdom to work in the unit tests so that ReactTestUtils.renderIntoDocument() works. Not working yet, but my proposal is:

  it('Should expose the ComposedComponent ref', () => {
    const WithStylesComponent = withStyles('')(
      class FooWithRef extends Component {
        render() {
          return <div ref="internalRef" />;
        }
      }
    ));
    const comp = ReactTestUtils.renderIntoDocument(<WithStylesComponent/>);
    expect(comp.refs.composedComponent.refs.internalRef).to.not.be.null;
  });

[frenzzy]

@jasonsanjose this feature already available, look at this: https://github.com/kriasoft/isomorphic-style-loader/blob/master/test/withStylesSpec.js#L40-L49

class YourComponent extends Component {
  render() {
    return <div ref="yourRef" />;
  }
}

const YourComponentWithStyles = withStyles('')(YourComponent);

YourComponentWithStyles.ComposedComponent.refs.yourRef // => DOM element

But probably the better way is to specify refs via props, it covers the case when your component is wrapped into multiple decorators:

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <input ref={this.props.inputRef} />
      </div>
    );
  }
}

const DecoratedChildComponent = withStyles('')(ChildComponent);

class ParentComponent extends Component {
  componentDidMount() {
    this.input.focus();
  }

  render() {
    return (
      <DecoratedChildComponent inputRef={input => this.input = input} />
    );
  }
}

[jasonsanjose]

@frenzzy thanks for the heads up. I missed this change #21. I'll take a look and reevaluate.

[frenzzy]

String refs are considered legacy, and will likely be deprecated at some point in the future.
Callback refs are preferred. More info in react docs: Refs to Components.