Question

每次组件更改路线时，我都会对react-router更新道具产生疑问。

在我的文档中，我有多个部分，所有部分都链接到导航菜单。例如：

/ about＃aboutus
/关于#contact

在about组件中，我实现了一个scrollSpy函数，如下所示：

<?php 
                        $listCategories = get_categories();
                        if(isset($listCategories) && !empty($listCategories)){


                    ?>
                        <div class="list-section">
                            <h3 class="list-heading">Topics</h3>
                            <ul id="post-grid">
                                <?php 
                                    foreach($listCategories as $categories){
                                            $total_post = get_posts(array('post_type'=>'post', 'category'=>$categories->term_id, 'posts_per_page'=>'-1'));
                                            $total_post = count($total_post);
                                ?>
                                <li>
                                    <div class="checkbox">
                                        <input type="checkbox" id="cat<?php echo $categories->term_id; ?>" data-tax="category" data-name="<?php echo $categories->name; ?>" class="category_check" value="<?php echo $categories->term_id; ?>">
                                        <label class="css-label" for="cat<?php echo $categories->term_id; ?>">
                                            <span class="filter-name"><?php echo $categories->name; ?></span>
                                            <span class="filter-count"><?php echo $total_post; ?></span>
                                            <i class="icon fa fa-check"></i>
                                        </label>
                                    </div>
                                </li>
                                <?php } ?>
                            </ul>
                        </div>
                    <?php } ?>

还有scrollTo这样的功能

scrollSpy() {
    if (this.isTransitioning) return;
    let hash = this.getCurrentSection();
    if (this.state.activeSection != hash) {
        this.setState({ activeSection: hash });
        history.pushState(null, null, hash);
    }
}

我还实现了此功能，以便从导航栏中选择文章时将文章滚动到所需部分。

scrollTo(hash) {
    this.isTransitioning = true;
    let section = $(hash);
    let body = $("html, body");
    let navBar = $("#mainNav");
    let top = section.offset().top - navBar.height() - 10;

    body.stop().animate({
        scrollTop: top
    }, 800, 'swing', () => {
        this.isTransitioning = false;
        this.scrollSpy();
    })
}

现在，问题是，当我像下面这样向scrollSpy中插入一行以更新历史记录时：

componentDidUpdate(prevProps, prevState) {
    if (this.props.location.hash != prevProps.location.hash) {
        this.scrollTo(this.props.location.hash);
    }
}

系统将无限期地上下滚动。

似乎组件将信号发送到React-Router，然后React-Router更改道具，而scrollSpy再次发送回React-Router。因此有点卡住了。添加变量scrollSpy() { if (this.isTransitioning) return; let hash = this.getCurrentSection(); if (this.state.activeSection != hash) { this.setState({ activeSection: hash }); history.pushState(null, null, hash); this.props.history.push(hash); } }并没有帮助，并且使其行为无法预测。有时它会滚动，有时它不会，有时会跳回到顶部。

如何确定道具更改是否来自我的history.push触发器或用户单击导航栏？当用户单击导航栏时，即使它是屏幕上显示的当前部分，我也希望页面滚动到所需的部分顶部。

谢谢

React Router阻止路由属性更新

0 个答案: