using jquery with reactjs

Question

我只需要为我的网站主页添加一个计数时钟即可。我正在使用流星和ReactJ。当我将其放入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的组件生命周期方法