no-string-refs.md

Prevent using string references (no-string-refs)

Currently, two ways are supported by React to refer to components. The first one, providing a string identifier is considered legacy in the official documentation. Referring to components by setting an property on the this object in the reference callback is preferred.

Rule Details

Invalid:

var Hello = React.createClass({
 render: function() {
  return <div ref="hello">Hello, world.</div>;
 }
});

var Hello = React.createClass({
  componentDidMount: function() {
    var component = this.refs.hello;
    // ...do something with component
  },
  render: function() {
    return <div ref="hello">Hello, world.</div>;
  }
});

Valid:

var Hello = React.createClass({
  componentDidMount: function() {
    var component = this.hello;
    // ...do something with component
  },
  render() {
    return <div ref={c => this.hello = c}>Hello, world.</div>;
  }
});