声明了 React 组件，但它的值从未被读取，但我已经“读取”了它答案

【问题标题】：React component is declared but its value is never read BUT I HAVE "READ" IT声明了 React 组件，但它的值从未被读取，但我已经“读取”了它
【发布时间】：2021-12-23 03:51:55
【问题描述】：

我有一个奇怪的简单问题，我尝试从另一个文件导入一个名为“floatingFilter”的组件并使用通常的语法调用它：，但是 VS 代码告诉我我的组件从未使用过，也没有渲染我的组件！！这是我的代码： floatingFilter.jsx（组件文件）

import React from "react";
import Style from "./floatingFilter.module.css";

function floatingFilter() {
  return (
    <>
      <h1>I'm dead inside</h1>
    </>
  );
}

export default floatingFilter;

ProductsMainPart.jsx（我导入 floatingFilter.jsx 的另一个组件

import React from "react";
import Style from "./ProductsMainPart.module.css";
import SideBar from "./SideBar";
import { OneProduct } from "../ProductDetail/ProductData";
import ProductItem from "../ProductItem/ProductItem";
import TopFilter from "./TopFilter";
import Pagination from "./Pagination";
**import floatingFilter from "./floatingFilter";** /*vscode tell that this component is never used while I have called it */

function ProductsMainPart() {
  return (
    <>
      <div className={Style.mainPartContainer}>
        {/* side bar */}
        <aside className={`${Style.sideBarContainer}`}>
          <SideBar />
        </aside>

        {/* Main part */}
        <div className={`${Style.productsShowContainer}`}>
          {/* Top filter */}
          <div className={`${Style.topFilterContainer}`}>
            <TopFilter />
          </div>
          {/* Product Grid */}
          <div className={`${Style.productsGrid}`}>
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
          </div>
          {/* Pagination */}
          <div className={`${Style.paginationContainer}`}>
            <Pagination />
          </div>

          <div className={`${Style.paginationContainer}`}>
            **<floatingFilter /> /* I call my imported component here */**
          </div>
        </div>
      </div>
    </>
  );
}

export default ProductsMainPart;

【问题讨论】：

标签： html css reactjs import jsx

【解决方案1】：

每个 React 组件都应该以大写字母开头。

将floatingFilter.jsx的内容改为如下：

import React from "react";
import Style from "./floatingFilter.module.css";

function FloatingFilter() { // <-- capitalized letter
  return (
    <>
      <h1>I'm dead inside</h1>
    </>
  );
}

export default FloatingFilter; // <-- capitalized letter

并且也像这样渲染它：

<div className={`${Style.paginationContainer}`}>
    <FloatingFilter />
</div>

【讨论】：

天啊！！！非常感谢您！！！像魅力一样工作:))))) 我总是将我以前的组件中的第一个字母大写，但我认为这只是一个名称约定，没有任何错误。我今天只是分心，并没有注意到命名。你是个传奇！