React with jquery 不会在 dom 更改时更新 UI

Question

我有一个滑块，当用户使用 setState 单击按钮然后调用 jquery 插件进行更新时，我正在向其添加幻灯片，我在 dom 上看到了新元素但它似乎 jquery 滑块不会更新更改并添加滑块。有什么问题？

var Posts = React.createClass({
  componentDidMount: function() {
   swiper = new Swiper ('.swiper-container', {  
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
  });

  },
  updateData: function() {
    this.setState({
     posts: [{title:Math.random()}, {title:Math.random()},{title:Math.random()}]
    });
     swiper.update(true);

  },
  getInitialState: function() {
  return {
    posts: [{title:1111}, {title:2222}]
  }
  },
 render: function() {
 console.log('run');
  var postNodes = this.state.posts.map(function( post, i ) {
      return (
        <Post title={post.title} key={i}/>
      );
    });
 return (
        <section>
        <SwiperComponent>
          {postNodes}
        </SwiperComponent> 
        <button onClick={this.updateData}>update Data</button>
        </section>
    );
 } 
});

Fiddle: http://jsbin.com/tocujutaro/1/edit?html,js,output

Answer 1

问题是您在调用 setState 之后同步调用 swiper，但更改尚未应用到 DOM。相反，您应该这样做：

this.setState({...}, function () { // Update swiper });

这是有效的，因为传递给 setState 的回调将在状态已应用且 DOM 已更新后执行。

React with jquery 不会在 dom 更改时更新 UI

React with jquery does not update the UI on dom change

javascript

jquery

reactjs