未捕获的类型错误：无法读取 null 的属性（读取 \'offsetTop\'）答案

【问题标题】：Uncaught TypeError: Cannot read properties of null (reading 'offsetTop')未捕获的类型错误：无法读取 null 的属性（读取 \'offsetTop\'）
【发布时间】：2022-10-23 02:09:22
【问题描述】：

我试图创建滚动效果。当您单击导航栏上的选项时，我们会转到特定部分。

为什么我会收到此错误？

这是出现错误的代码：

import React, { useRef } from 'react'
export default function Home() {
    const about = useRef(null);
    const work = useRef(null);
    const contact = useRef(null);

    const scrollSection = (elementRef) => {
        window.scrollTo({
          top: elementRef.current.offsetTop,
          behavior: "smooth",
        });
      };
    return (
        <>
            <div ref={about} className='first'>
                <nav className="navbar">

                    <div className="logo">
                        <video loop autoPlay muted playsInline className='logo_video' >
                            <source src={video} type="video/mp4" />
                        </video>
                    </div>
                    <div className="about_section">
                        <ul className="list">
                            <li className="info about">
                                <div className="infoindex" onClick={() => scrollSection(about)}>
                                    About
                                </div>
                            </li>
                            <li className="info">
                                <div className="infoindex" onClick={scrollSection(work)}>
                                    Work

                                </div>
                            </li>
                            <li className="info">
                                <div className="infoindex" onClick={scrollSection(contact)}>
                                    Contact

                                </div>
                            </li>
                        </ul>
                    </div>

                </nav>

我可以对此代码进行哪些编辑？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

查看以下代码行：

<div className="infoindex" onClick={() => scrollSection(about)}>
<div className="infoindex" onClick={scrollSection(work)}>
<div className="infoindex" onClick={scrollSection(contact)}>

现在你可以看到区别了，scrollSection(work) 和 scrollSection(contact) 在每次渲染中都会触发 scrollSection 函数，即使你没有点击它们。不要忘记为它们添加箭头功能。

<div className="infoindex" onClick={() => scrollSection(about)}>
<div className="infoindex" onClick={() => scrollSection(work)}>
<div className="infoindex" onClick={() => scrollSection(contact)}>

顺便说一句，您只处理 div 父级的 about 引用：

<div ref={about} className='first'>

您还需要处理其余的引用，并且不要忘记 onClick 事件，如果您的 about div 包装了其余的 div，那么如果您想单击父 div 内的子 div，它可能会出现不需要的行为。

【讨论】：

【解决方案2】：

您没有将work 和contact 引用传递给元素，就像您对about 引用所做的那样，因此它们永远不会被设置，这就是您获得空电流的原因。

你不应该直接在onClick中调用scrollSection，而是传递一个回调函数，当div被点击时执行

<div className="infoindex" onClick={() => scrollSection(work)>Work</div>

and

<div className="infoindex" onClick={() => scrollSection(contact)}>Contact</div>

【讨论】：