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

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

Hide file tree

Showing 2 changed files with 39 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://github.com/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
@@ -59,6 +59,19 @@ ruleTester.run('no-refs', rule, {
         });
       `,
     },
+    {
+      code: `
+        var Hello = createReactClass({
+          componentDidMount: function() {
+            var component = this.refs.hello;
+          },
+          render: function() {
+            return <div>Hello {this.props.name}</div>;
+          }
+        });
+      `,
+      settings: { react: { version: '18.3.0' } },
+    },
   ]),
 
   invalid: parsers.all([
@@ -73,6 +86,7 @@ ruleTester.run('no-refs', rule, {
           }
         });
       `,
+      settings: { react: { version: '18.2.0' } },
       errors: [{ messageId: 'thisRefsDeprecated' }],
     },
     {
@@ -83,6 +97,7 @@ ruleTester.run('no-refs', rule, {
           }
         });
       `,
+      settings: { react: { version: '18.2.0' } },
       errors: [{ messageId: 'stringInRefDeprecated' }],
     },
     {
@@ -93,6 +108,7 @@ ruleTester.run('no-refs', rule, {
           }
         });
       `,
+      settings: { react: { version: '18.2.0' } },
       errors: [{ messageId: 'stringInRefDeprecated' }],
     },
     {
@@ -106,6 +122,7 @@ ruleTester.run('no-refs', rule, {
           }
         });
       `,
+      settings: { react: { version: '18.2.0' } },
       errors: [
         { messageId: 'thisRefsDeprecated' },
         { messageId: 'stringInRefDeprecated' },
@@ -123,6 +140,7 @@ ruleTester.run('no-refs', rule, {
         });
       `,
       options: [{ noTemplateLiterals: true }],
+      settings: { react: { version: '18.2.0' } },
       errors: [
         { messageId: 'thisRefsDeprecated' },
         { messageId: 'stringInRefDeprecated' },
@@ -140,10 +158,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' },
+      ],
+    },
   ]),
 });