eslint變量已使用卻報為使用的錯誤

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規(guī)則，對帶有這個前綴的變量不予檢查）