时间戳

首页 > 解决方案 > 声明了 React 组件，但它的值从未被读取，但我已经“读取”了它

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

问题描述

伙计们，我有一个奇怪的简单问题，我尝试从另一个文件导入一个名为“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;

标签： htmlcssreactjsimportjsx

解决方案

每个 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>

推荐阅读