javascript - React 渲染搞乱了我与 Masonry 的 ref 绑定(bind)

Question

所以我有一个 <ul>列表为 <li>我想要在我的 React 应用程序中砌筑的项目，这些项目稍后将被来回过滤。当组件重新渲染时就会出现问题。我想对列表中新添加/删除的项目进行平滑更新。

所以这是到目前为止有问题的代码:(不是全部，只是重要的部分)

import Masonry from 'masonry-layout'

componentDidMount: function() {
  this.masonry = new Masonry( this.list, {
    itemSelector: '.card',
    gutter: 10,
    percentPosition: true
  })
},

componentDidUpdate: function() {
  this.masonry.reloadItems()
},

render: function() {
  return (
    <div>
      <h3>{this.props.name}</h3>
      <ul className="card-list" ref={(ul) => { this.list = ul }}>
        {this._renderCards()}
      </ul>
    </div>
  )
},

_renderCards: function() {
  return this.state.cards.map(card => (
    <Card key={card.name} {...card} />
  ))
},

似乎发生的情况是，每次组件更新 <ul>被重新渲染并失去了与砖石的绑定(bind)，这使我无法对它做任何进一步的事情，我真的不明白为什么会这样做，因为实际上只有列表被更新。

非常感谢任何帮助!

编辑:这是 Masonry 的 reloadItems() http://masonry.desandro.com/methods.html#reloaditems 的文档

Answer 1

经过多次搜索和挖掘，它似乎按照我的预期工作，我唯一缺少的是 reloadItems() 不会触发 Masonry 完成的任何布局，因此在我重新加载后调用它这些项目解决了这个问题，如下所示:

componentDidUpdate: function() {
  this.masonry.reloadItems()
  this.masonry.layout()
},