组件已声明但从未使用答案

【问题标题】：Component is declared but never used组件已声明但从未使用
【发布时间】：2019-02-10 23:01:21
【问题描述】：

我不断收到这个奇怪的消息，并且 React 没有渲染我的组件。我很确定我正在正确渲染和导入它：

容器：

import searchBar from "./searchBar";

class ItemList extends Component {

    render() {
        return (
      <searchBar/>
        );
    }
}

搜索栏

import React, { Component } from 'react';

const searchBar = () => {
    return <div>ssuhsuhuhsususu</div>;
  }
export default searchBar

【问题讨论】：

标签： reactjs

【解决方案1】：

改成

const SearchBar = () => {
  return <div>ssuhsuhuhsususu</div>;
}
export default SearchBar;

如果您以小写字母命名，它将被视为 HTML 标记，例如 <p>, <div> 因此，您的组件应始终以 CAPS 开头。

【讨论】：

另外，由于您只是声明一个无状态的功能组件，因此无需导入Component。所以改变 import React, { Component } from 'react';从 'react' 导入 React;

【解决方案2】：

如果您想使用名称以小写开头的组件，则可以使用以下提示：

只需在使用前将其分配给大写变量即可。

import searchBar from "./searchBar";
const Foo = searchBar;
<Foo/>

完整代码：

import searchBar from "./searchBar";

const Foo = searchBar;

class ItemList extends Component {

    render() {
        return (
        <Foo/>
        );
    }
}

【讨论】：