Merge pull request #2167 from jenil94/no-string-refs-fix

Added check for template literals in no-string-refs rule

Author: ljharb

docs/rules/no-string-refs.md

@@ -39,3 +39,29 @@ var Hello = createReactClass({
   }
 });
 ```
+
+## Rule Options
+
+```js
+"react/no-string-refs": [<enabled>, {"noTemplateLiterals": <boolean>}]
+```
+### `noTemplateLiterals`
+
+When set to `true`, it will give warning when using template literals for refs.
+The following patterns will be considered warnings:
+
+```jsx
+var Hello = createReactClass({
+ render: function() {
+  return <div ref={`hello`}>Hello, world.</div>;
+ }
+});
+```
+
+```jsx
+var Hello = createReactClass({
+ render: function() {
+  return <div ref={`hello${index}`}>Hello, world.</div>;
+ }
+});
+```

lib/rules/no-string-refs.js

@@ -19,10 +19,19 @@ module.exports = {
       recommended: true,
       url: docsUrl('no-string-refs')
     },
-    schema: []
+    schema: [{
+      type: 'object',
+      properties: {
+        noTemplateLiterals: {
+          type: 'boolean'
+        }
+      },
+      additionalProperties: false
+    }]
   },
 
   create: Components.detect((context, components, utils) => {
+    const detectTemplateLiterals = context.options[0] ? context.options[0].noTemplateLiterals : false;
     /**
      * Checks if we are using refs
      * @param {ASTNode} node The AST node being checked.
@@ -75,8 +84,8 @@ module.exports = {
         node.value &&
         node.value.type === 'JSXExpressionContainer' &&
         node.value.expression &&
-        node.value.expression.type === 'Literal' &&
-        typeof node.value.expression.value === 'string'
+		((node.value.expression.type === 'Literal' && typeof node.value.expression.value === 'string') ||
+		(node.value.expression.type === 'TemplateLiteral' && detectTemplateLiterals))
       );
     }
 

tests/lib/rules/no-string-refs.js

@@ -38,6 +38,26 @@ ruleTester.run('no-refs', rule, {
       });
     `,
     parser: 'babel-eslint'
+  },
+  {
+    code: [
+      'var Hello = createReactClass({',
+      '  render: function() {',
+      '    return <div ref={`hello`}>Hello {this.props.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parser: 'babel-eslint'
+  },
+  {
+    code: [
+      'var Hello = createReactClass({',
+      '  render: function() {',
+      '    return <div ref={`hello${index}`}>Hello {this.props.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parser: 'babel-eslint'
   }
   ],
 
@@ -97,5 +117,43 @@ ruleTester.run('no-refs', rule, {
     }, {
       message: 'Using string literals in ref attributes is deprecated.'
     }]
+  },
+  {
+    code: [
+      'var Hello = createReactClass({',
+      '  componentDidMount: function() {',
+      '  var component = this.refs.hello;',
+      '  },',
+      '  render: function() {',
+      '    return <div ref={`hello`}>Hello {this.props.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    options: [{noTemplateLiterals: true}],
+    errors: [{
+      message: 'Using this.refs is deprecated.'
+    }, {
+      message: 'Using string literals in ref attributes is deprecated.'
+    }]
+  },
+  {
+    code: [
+      'var Hello = createReactClass({',
+      '  componentDidMount: function() {',
+      '  var component = this.refs.hello;',
+      '  },',
+      '  render: function() {',
+      '    return <div ref={`hello${index}`}>Hello {this.props.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    options: [{noTemplateLiterals: true}],
+    errors: [{
+      message: 'Using this.refs is deprecated.'
+    }, {
+      message: 'Using string literals in ref attributes is deprecated.'
+    }]
   }]
 });