使用jQuery与reactjs

Question

我只需要为我的网站主页添加一个倒数时钟。我正在使用流星和反应。当我将它放入componentDidMount中时，有时它有时不起作用。我也有一个JavaScript滑块。有时我在控制台中收到“倒计时不是功能”错误消息。我如何让我的代码工作？

componentDidMount() { 
    // The counter 
    function countDown(){ 
     $('#clock').countdown('2016/9/9', function (event) { 
     var $this = $(this).html(event.strftime('' 
     + '<span>%m</span> months ' 
     + '<span>%w</span> weeks ' 
     + '<span>%d</span> days ' 
     + '<span>%H</span> hr ' 
     + '<span>%M</span> min ' 
     + '<span>%S</span> sec')); 
     }); 
    } 

    // The background image slide 
    $('body').vegas({ 
     slides: [ 
     { src: '/images/slides/slide1.jpg' }, 
     { src: '/images/slides/slide2.jpg' }, 
     { src: '/images/slides/slide3.jpg' }, 
     ], 
     cover:    true, 
     animation:   'random', 
     transition:   'fade', 
     transitionDuration: 2500, 
     overlay:   '/images/slides/overlay.png', 
    }); 

    // The counter 
    countDown(); 
    } 

Answer 1

当每次倒计时时，您需要更新状态并做出反应，根据状态变化重新呈现您的视图。你所说的“有时有效，有时不会”的原因是，只有当状态或道具变化时，反应才会更新其观点。另外，你也需要为你的滑块做同样的事情。另一点是，在反应中手动操作DOM（在大多数情况下）是一种不好的做法，因为直接在DOM上进行更改时，协调/差异机制将毫无意义。您需要将您的视图更改为React的组件生命周期方法