Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions docs/rules/no-string-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,22 @@ var Hello = createReactClass({
});
```

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

The following patterns are **not** considered warnings:

```jsx
Expand Down
4 changes: 2 additions & 2 deletions lib/rules/no-string-refs.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,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')
);
}

Expand Down
36 changes: 36 additions & 0 deletions tests/lib/rules/no-string-refs.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,5 +97,41 @@ 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',
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',
errors: [{
message: 'Using this.refs is deprecated.'
}, {
message: 'Using string literals in ref attributes is deprecated.'
}]
}]
});