eslint变量已使用却报为使用的错误

Question

import React from 'react'
import styles from './style.css'
import '../../assets/img/iconfont/style.css'
import Search from '../search/index.jsx'
import Nav from '../nav/index.jsx'

export default class Header extends React.Component {
    render () {
        return (
            <div className={styles.header}>
                <div className={styles.con}>
                    <a className={styles.logoCon}>
                        <span className={'icon-react ' + styles.logo}></span>
                        <span className={styles.title}>React</span>
                    </a>
                    <Nav />
                    <Search />
                    <div className={styles.info}>
                        <span>v16.1.1</span>
                        <span>GitHub<i className='icon-share'></i></span>
                    </div>
                </div>
            </div>
        )
    }
}

如上面的代码，引入的组件Search与Nav在下面是用使用到的，但是eslint却报未使用的错误：

对于这个问题，各位大神有哪些解决方案？
（注：我自己有一种方案，但觉得不是特别好，就是给组件的变量加一个前缀，然后配置eslint规则，对带有这个前缀的变量不予检查）

Answer 1

eslint是不是有jsx的版本规范啊，你配的是这个的吗？

Answer 2

其实不太明白，你不用为什要定义？或者说你定义之后为什么不用？

你说的inline-eslint方式确实可以解决，但是这样的写码方式不是很奇怪么。