时间戳

首页 > 解决方案 > 我的 App 功能没有读取导入的组件。我收到“已定义但从不使用”警告

reactjs - 我的 App 功能没有读取导入的组件。我收到“已定义但从不使用”警告

问题描述

我的代码由于某种原因无法读取导入的导航栏组件并显示空白页。有谁知道为什么？我得到的警告是“已定义但从未使用过”。

导航栏.js

import React from "react"

const navbar = () => {
    return(
        <nav>
            <div class="topnav">
                <a class="active" href="#home">Home</a>
                <a class="active" href="#home">Dining Halls</a>
                <a href="#news">Login</a>
                <a href="#contact">Signup</a>
            </div>
        </nav>
    )
}

export default navbar

应用程序.js

import React from "react"
import "./App.css"
import navbar from "./components/navbar.js";

function App() {
  return (
    <navbar />
  );
}


export default App;

标签： reactjs

解决方案

尝试将您的组件重命名为 Navbar 而不是 navbar，就像 Ali 说的那样。原因是，按照惯例，React 将使用小写的任何 jsx，就好像它是一个 html 标签，而不是一个组件。你使用的所有组件都应该放在 PascalCase 中，以便 React 理解它是一个组件，而不仅仅是一个 html 标签。

推荐阅读