引導專案中的代碼未在我的專案中呈現

（第一個問題問請放輕松）

嗨，我已經從一個指導專案中復制并粘貼了一個組件，以查看沒有呈現任何內容..我已經完成了：

1. 匯入相同的模塊
2. 替換影像
3. 將 app.js 更改為僅顯示此組件
4. 用引導專案中的樣式替換樣式（引導專案在其他選項卡中作業正常）

在什么都沒有呈現之后你會做什么檢查？

NavBar2.js

import { useState, useEffect } from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import { HashLink } from 'react-router-hash-link';
import {
  BrowserRouter as Router
} from "react-router-dom";

const NavBar2 = () => {

  const [activeLink, setActiveLink] = useState('home');
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      if (window.scrollY > 50) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    }

    window.addEventListener("scroll", onScroll);

    return () => window.removeEventListener("scroll", onScroll);
  }, [])

  const onUpdateActiveLink = (value) => {
    setActiveLink(value);
  }

  return (
    <Router>
      <Navbar expand="sm" className={scrolled ? "scrolled" : ""}>
        <Container>
          <Navbar.Brand href="/">
            <img src= "src/assets/Adobe_Photoshop_CC_icon.png" alt="Logo" />
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav">
            <span className="navbar-toggler-icon"></span>
          </Navbar.Toggle>
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ms-auto">
              <Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('home')}>Home</Nav.Link>
              <Nav.Link href="#skills" className={activeLink === 'skills' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('skills')}>Skills</Nav.Link>
              <Nav.Link href="#projects" className={activeLink === 'projects' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('projects')}>Projects</Nav.Link>
            </Nav>
            <span className="navbar-text">
              <div className="social-icon">
                <a href="#"><img src="src\assets\Adobe_Photoshop_CC_icon.png" alt="" /></a>
                <a href="#"><img src='src\assets\Adobe_Photoshop_CC_icon.png' alt="" /></a>
                <a href="#"><img src='src\assets\Adobe_Photoshop_CC_icon.png' alt="" /></a>
              </div>
              <HashLink to='#connect'>
                <button className="vvd"><span>Let’s Connect</span></button>
              </HashLink>
            </span>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </Router>
  )
}

export default NavBar2

應用程式.js

import logo from './logo.svg';
import './App.css';
import NavBar2 from "./components/NavBar2";

function App() {
  return (
    <div className="App">
      <NavBar2/> 
    </div>
  );
}

export default App;

好的，這是我得到的錯誤，但我沒有看到任何對我撰寫/復制粘貼的代碼的參考

{
  "name": "portfolio-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.6.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.3",
    "react-router-hash-link": "^2.4.3",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

導航欄的預期呈現，收到一個空白螢屏

uj5u.com熱心網友回復：

我將您的代碼發布到StackBlitz 中并進行了更改

import { useState, useEffect } from "react";

至

import React, { useState, useEffect } from "react";

然后運行 ??npm install 以確保我擁有最新的所有軟體包。這是為我渲染的。仔細檢查所有匯入和包的版本。

標籤：反应渲染

上一篇：將react-router-dom從Switch升級到Route

下一篇：obj.map不是ReactJS的函式問題