通过 ReactJS 进行垂直点导航

Question

我一直在尝试在我的 ReactJS 项目中实现垂直点导航，并且我尝试实现这个 jsfiddle，它使用 jquery 实现它。

    $(document).ready(function($){
          var parPosition = [];
        $('.par').each(function() {
            parPosition.push($(this).offset().top);
        });

        $('a').click(function(){
            $('html, body').animate({
                scrollTop: $( $.attr(this, 'href') ).offset().top
            }, 500);
            return false;
        });

            $('.vNav ul li a').click(function () {
            $('.vNav ul li a').removeClass('active');
                $(this).addClass('active');
        }); 

       $('.vNav a').hover(function() {
           $(this).find('.label').show();
           }, function() {
           $(this).find('.label').hide();
       });

           $(document).scroll(function(){
        var position = $(document).scrollTop(),
                index; 
                for (var i=0; i<parPosition.length; i++) {
                if (position <= parPosition[i]) {
                    index = i;
                    break;
                }
            }
      $('.vNav ul li a').removeClass('active');
            $('.vNav ul li a:eq('+index+')').addClass('active');
        });

            $('.vNav ul li a').click(function () {
            $('.vNav ul li a').removeClass('active');
                $(this).addClass('active');
        });   
    });

没有用。我花了一段时间才意识到 jquery dom 操作和 ReactJS 并不能很好地协同工作。我进行了一些搜索，发现这个 stackoverflow question 的答案也证实了这一点。

有没有人尝试过这样做？我在任何地方都找不到

谢谢

Answer 1

我们使用了 react-scroll 包，这对我们非常有效。