使用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的組件生命週期方法