diff --git a/docs/rules/no-string-refs.md b/docs/rules/no-string-refs.md index 521715a40a..9880984b35 100644 --- a/docs/rules/no-string-refs.md +++ b/docs/rules/no-string-refs.md @@ -39,3 +39,29 @@ var Hello = createReactClass({ } }); ``` + +## Rule Options + +```js +"react/no-string-refs": [, {"noTemplateLiterals": }] +``` +### `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
Hello, world.
; + } +}); +``` + +```jsx +var Hello = createReactClass({ + render: function() { + return
Hello, world.
; + } +}); +``` diff --git a/lib/rules/no-string-refs.js b/lib/rules/no-string-refs.js index ef8195a7bb..7af866f6b4 100644 --- a/lib/rules/no-string-refs.js +++ b/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)) ); } diff --git a/tests/lib/rules/no-string-refs.js b/tests/lib/rules/no-string-refs.js index a36aaa72a6..316d8e3269 100644 --- a/tests/lib/rules/no-string-refs.js +++ b/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
Hello {this.props.name}
;', + ' }', + '});' + ].join('\n'), + parser: 'babel-eslint' + }, + { + code: [ + 'var Hello = createReactClass({', + ' render: function() {', + ' return
Hello {this.props.name}
;', + ' }', + '});' + ].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
Hello {this.props.name}
;', + ' }', + '});' + ].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
Hello {this.props.name}
;', + ' }', + '});' + ].join('\n'), + parser: 'babel-eslint', + options: [{noTemplateLiterals: true}], + errors: [{ + message: 'Using this.refs is deprecated.' + }, { + message: 'Using string literals in ref attributes is deprecated.' + }] }] });