Проблема с React-scrollspy-nav - PullRequest
Новая
       57

Проблема с React-scrollspy-nav

0 голосов
/ 04 октября 2019

Эта проблема, возможно, является единичным случаем. Я установил response-scrollspy-nav . Его основное назначение - плавная навигация к странице, смонтированной сверху, как строка меню. Но в моем случае я использую его в качестве индикатора, который фиксируется в правой части моей страницы и показывает, находится ли определенный раздел в поле зрения. На странице это работает гладко, но всякий раз, когда я переключаюсь на другую страницу, я получаю сообщение об ошибке:

Uncaught TypeError: Невозможно прочитать свойство 'offsetTop' из null

Вот пример использования пакета: 

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, не присутствует на других страницах, он просто игнорирует ошибку, не читая его идентификаторы? Спасибо.

...