Question

我一直收到这个奇怪的消息，React没有渲染我的组件。我很确定我可以正确渲染并导入它：

容器：

import searchBar from "./searchBar";

class ItemList extends Component {

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

searchBar

import React, { Component } from 'react';

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

Answer 1

更改为

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

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

Answer 2

如果要使用以小写字母开头的组件，则可以使用以下提示：

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

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

完整代码：

import searchBar from "./searchBar";

const Foo = searchBar;

class ItemList extends Component {

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

组件已声明但从未使用过

2 个答案: