Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Prevent using string references (react/no-string-refs) #1567

Closed
feross opened this issue Oct 28, 2020 · 0 comments
Closed

Prevent using string references (react/no-string-refs) #1567

feross opened this issue Oct 28, 2020 · 0 comments
Labels
accepted enhancement
Milestone
standard 16

Comments

@feross
Copy link
Member

feross commented Oct 28, 2020

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md

Currently, two ways are supported by React to refer to components. The first way, providing a string identifier, is now considered legacy in the official documentation. The documentation now prefers a second method -- referring to components by setting a property on the this object in the reference callback.

Rule Details

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>;
  }
});

Rule Options

"react/no-string-refs": [<enabled>, {"noTemplateLiterals": <boolean>}]

noTemplateLiterals

When set to true, it will give warning when using template literals for refs.
Examples of incorrect code for this rule:

var Hello = createReactClass({
 render: function() {
  return <div ref={`hello`}>Hello, world.</div>;
 }
});
var Hello = createReactClass({
 render: function() {
  return <div ref={`hello${index}`}>Hello, world.</div>;
 }
});
@feross feross added this to the standard 16 milestone Oct 28, 2020
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 29, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
accepted enhancement
Projects
The Standard Project
Archived in project
Milestone
standard 16
Development

No branches or pull requests
1 participant
@feross