带有React-scrollspy-nav的问题

Question

此问题也许是一个孤立的案例。我已经安装了react-scrollspy-nav。它的主要目的是像菜单栏一样平滑导航到顶部安装的页面。但以我为例，我将其用作指示器，固定在页面的最右侧，告诉视图中是否有特定的部分。它在页面上可以正常工作，但是每当我切换到另一个页面时，都会出现错误消息：

未捕获的TypeError：无法读取null的属性'offsetTop']

以下是该包的用法示例：

import React, { Component } from "react";
import ScrollspyNav from "react-scrollspy-nav";

class App extends Component {
    render() {
        return (
            <div>
                <div>
                    <ScrollspyNav
                        scrollTargetIds={["section_1", "section_2", "section_3"]}
                        activeNavClass="is-active"
                        scrollDuration="1000"
                        headerBackground="true"
                    >
                        <ul>
                            <li><a href="/"><span>Home</span></a></li>
                            <li><a href="#section_1"><span>Section 1</span></a></li>
                            <li><a href="#section_2"><span>Section 2</span></a></li>
                            <li><a href="#section_3"><span>Section 3</span></a></li>
                        </ul>
                    </ScrollspyNav>
                </div>

                <div>
                    <div style={{"height": "400px"}}><span>Welcome!</span></div>
                    <div id="section_1" style={{"height": "500px"}}><span>Section 1</span></div>
                    <div id="section_2" style={{"height": "500px"}}><span>Section 2</span></div>
                    <div id="section_3" style={{"height": "500px"}}><span>Section 3</span></div>
                </div>
            </div>
        );
    }
}

export default App; 
我的问题是，每当我转到其他链接或页面时，有没有办法防止这种情况？也许有一种方法，只要我的Scrollspy所在的特定组件在其他页面中不存在，它就会通过不读取其ID来忽略该错误？谢谢。

此问题也许是一个孤立的案例。我已经安装了react-scrollspy-nav。它的主要目的是像菜单栏一样平滑导航到顶部安装的页面。但就我而言，我将其用作...

Answer 1

签出React错误边界https://reactjs.org/docs/error-boundaries.html