How to call child's method or child's refs?

I want to call child method or reference to child’s refs. It should work, but refs.child returns ProxyComponent rather than Child. And, the ProxyComponent does not have method nor refs.root. I think this is due to having hot module reloading together with withStyles. Any ideas? I’ve tried with release mode as well, but to no avail.

Child.js

import React, {PropTypes} from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Child.css';


class Child extends React.Component {
  method() { console.log('child'); }

  render() {
    return (
      <div ref="root">
      </div>
    );
  }
}

export default withStyles(s)(Child);

Parent.js

import React, {PropTypes} from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Parent.css';
import Child from './Child';


class Parent extends React.Component {
  callChildMethod() { this.refs.child.method(); } // doesnt work.

  render() {
    return (
      <div>
        <Child ref="child" />
      </div>
    );
  }
}

export default withStyles(s)(Parent);

[frenzzy]

This approach works fine with hot reload in master branch. Maybe you want to use this and just forgot to bind context?

P.S.: Added a tiny new section to React docs: When to Use Refs

[frenzzy]

Like so?