reactjs React中出现“scrollIntoView无法读取”null“的属性”错误

我收到错误 * * 未捕获的 TypeError ：尝试单击导航栏上的项目时，无法读取 null （读取 " scrollIntoView " ） * * 的属性。
这是一个有点棘手的问题，但如果我从头开始加载页面，它将抛出上述错误。然而，如果我再次将项目保存在 VSCode 中，它将完全正常工作，直到我刷新页面。有什么办法来纠正这个问题吗？

- 导航栏 . jsx ： * *

import { useState } from 'react';
import { Link } from 'react-router-dom';
import '../App.css';
import myAvatar from '../images/avataaars.png';

function Navbar() {
    const aboutPage = document.getElementById('about');
    const home = document.getElementById('home');
    const skills = document.getElementById('skills');
    const [navbar, setNavbar] = useState(true);

    const handleNavbarToggle = (e) =>{
        setNavbar(!navbar);
    }

    return(
        <>
        <div className='navbar-container'>
            <Link to='/'><img src={myAvatar} className='nav-logo'/></Link>
            <ul>
                <li onClick={() =>{home.scrollIntoView({behavior: 'smooth'})}}>Home</li>
                <li onClick={() =>{aboutPage.scrollIntoView({behavior: 'smooth'})}}>About</li>
                <li onClick={() => {skills.scrollIntoView({behavior: 'smooth'})}}>Skills</li>
                <li>Projects</li>
                <li id='navbar-login-btn'>Login</li>
            </ul>
            <div className={`navbar-toggle ${navbar ? '' : 'open'}`} onClick={handleNavbarToggle}>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div className={`navbar-header ${navbar ? 'navbar-header-hide' : ''}`}>
            <ul>
                <Link className='navbar-header-item' to='/'>Home</Link>
                <Link className='navbar-header-item' to='/about'>About</Link>
                <Link className='navbar-header-item' to='/skills'>Skills</Link>
                <Link className='navbar-header-item' to='/projects'>Projects</Link>
                <Link className='navbar-header-item' to='/login'>Login</Link>
            </ul>
        </div>
        </>
    )
}

export default Navbar;

中的每一个

- 应用程序 js ： * *

import { useState, useEffect } from 'react';
import { Route, Routes } from 'react-router-dom';
import TextTransition, { presets } from 'react-text-transition';
import './App.css';
import Navbar from './components/Navbar';
import Homepage from './components/Homepage';
import About from './components/About';
import Skills from './components/Skills';
import myAvatar from './images/avataaars.png';

function App() {

  return (
    <>
    <Navbar />
      <div className='homepage-container-web'>
        <Homepage />
        <About />
        <Skills />
      </div>
    <div className='homepage-container-devices'>
      <Routes>
        <Route path='/' element={<Homepage />} />
        <Route path='/about' element={<About />}/>
      </Routes>
    </div>
    </>
  );
}

export default App;

格式

- 关于 . jsx ： * *

import '../App.css';

function About() {
    return(
        <>
        <div className='about-container' id='about'>
            <h2 class='about-title'>A little bit about me...</h2>
            <p>Hi, my name is Andrew! I'm 20 years old, and I have <a href='https://www.crohnscolitisfoundation.org/what-is-crohns-disease' target="_blank" style={{color: '#a61bee'}}>Crohn's Disease</a>. Ever since I was 12 years old I have had an interest in technology, software engineering, cybersecurity, firefighting, and cars. I currently work for the Department of Defense and hold a Senior IT Specialist position. I am always looking to learn and improve myself.</p>
        </div>
        <div className='about-ending-container' />
        </>
    )
}

export default About;

格式

问题是第一次渲染时

const aboutPage = document.getElementById('about');
const home = document.getElementById('home');
const skills = document.getElementById('skills');

中的每一个
这些元素还不存在。最简单的解决方案是将其更改为

const aboutPage = () => document.getElementById('about');
const home = () => document.getElementById('home');
const skills = () => document.getElementById('skills');

// ...

<li onClick={() =>{home().scrollIntoView({behavior: 'smooth'})}}>Home</li>
<li onClick={() =>{aboutPage().scrollIntoView({behavior: 'smooth'})}}>About</li>
<li onClick={() => {skills().scrollIntoView({behavior: 'smooth'})}}>Skills</li>

格式
这样它就可以在点击的时候进行搜索。这不是一种非常 " React " 的方式。但是它应该 " 只是工作 " 。
如果你想以 " 正确的方式 " 完成它，我想你会想使用 useRef ，并将其提升到应用程序中。以 home 为例，省略不相关的代码，它将是这样的：

function App() {
    const homeRef = useRef();
    // ...
    <Navbar homeRef={homeRef} />
    // ...
    <Homepage homeRef={homeRef} />
}

function Navbar({ homeRef }) {
    const scrollIntoView = (ref) => {
        if (ref.current) {
            ref.current.scrollIntoView({behavior: 'smooth'})
        }
    }
    
    <li onClick={() =>{scrollIntoView(homeRef)}}>Home</li>
} 

function Homepage({ homeRef }) {
    return(
        <>
            <div className='home-container' id='hone' ref={homeRef} >
                //...
            </div>
        </>
    )
}

格式

reactjs React中出现“scrollIntoView无法读取”null“的属性”错误

1条答案

相关问题

热门标签

最新问答