[New] no-string-refs: allow this.refs in > 18.3.0

jsx-eslint · Aug 27, 2024 · f59b3fa · f59b3fa
1 parent a2306e7
commit f59b3fa
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/lib/rules/no-string-refs.js b/lib/rules/no-string-refs.js
@@ -8,6 +8,7 @@
 const componentUtil = require('../util/componentUtil');
 const docsUrl = require('../util/docsUrl');
 const report = require('../util/report');
+const testReactVersion = require('../util/version').testReactVersion;
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -42,6 +43,7 @@ module.exports = {
  },
 
  create(context) {
+ const checkRefsUsage = testReactVersion(context, '< 18.3.0'); // `this.refs` is writeable in React 18.3.0 and later, see https:/facebook/react/pull/28867
  const detectTemplateLiterals = context.options[0] ? context.options[0].noTemplateLiterals : false;
  /**
  * Checks if we are using refs
@@ -93,7 +95,7 @@ module.exports = {
 
  return {
  MemberExpression(node) {
- if (isRefsUsage(node)) {
+ if (checkRefsUsage && isRefsUsage(node)) {
  report(context, messages.thisRefsDeprecated, 'thisRefsDeprecated', {
  node,
  });

diff --git a/tests/lib/rules/no-string-refs.js b/tests/lib/rules/no-string-refs.js
@@ -73,6 +73,7 @@ ruleTester.run('no-refs', rule, {
  }
  });
  `,
+ settings: { react: { version: '18.2.0' } },
  errors: [{ messageId: 'thisRefsDeprecated' }],
  },
  {
@@ -83,6 +84,7 @@ ruleTester.run('no-refs', rule, {
  }
  });
  `,
+ settings: { react: { version: '18.2.0' } },
  errors: [{ messageId: 'stringInRefDeprecated' }],
  },
  {
@@ -93,6 +95,7 @@ ruleTester.run('no-refs', rule, {
  }
  });
  `,
+ settings: { react: { version: '18.2.0' } },
  errors: [{ messageId: 'stringInRefDeprecated' }],
  },
  {
@@ -106,6 +109,7 @@ ruleTester.run('no-refs', rule, {
  }
  });
  `,
+ settings: { react: { version: '18.2.0' } },
  errors: [
  { messageId: 'thisRefsDeprecated' },
  { messageId: 'stringInRefDeprecated' },
@@ -123,6 +127,7 @@ ruleTester.run('no-refs', rule, {
  });
  `,
  options: [{ noTemplateLiterals: true }],
+ settings: { react: { version: '18.2.0' } },
  errors: [
  { messageId: 'thisRefsDeprecated' },
  { messageId: 'stringInRefDeprecated' },
@@ -140,10 +145,28 @@ ruleTester.run('no-refs', rule, {
  });
  `,
  options: [{ noTemplateLiterals: true }],
+ settings: { react: { version: '18.2.0' } },
  errors: [
  { messageId: 'thisRefsDeprecated' },
  { messageId: 'stringInRefDeprecated' },
  ],
  },
+ {
+ code: `
+ var Hello = createReactClass({
+ componentDidMount: function() {
+ var component = this.refs.hello;
+ },
+ render: function() {
+ return <div ref={\`hello\${index}\`}>Hello {this.props.name}</div>;
+ }
+ });
+ `,
+ options: [{ noTemplateLiterals: true }],
+ settings: { react: { version: '18.3.0' } },
+ errors: [
+ { messageId: 'stringInRefDeprecated' },
+ ],
+ },
  ]),
 });