react/no-string-refs Correctness

What it does

This rule prevents using string literals in ref attributes.

Why is this bad?

Using string literals in ref attributes is deprecated in React.

Examples

Examples of incorrect code for this rule:

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

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

Examples of correct code for this rule:

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

Configuration

This rule accepts a configuration object with the following properties:

noTemplateLiterals

type: boolean

default: false

Disallow template literals in addition to string literals.

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/no-string-refs --react-plugin

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-string-refs": "error"
  }
}

References

• Rule Source