javascript - React渲染使我的Ref绑定(bind)与Masonry困惑

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

到目前为止，这是有问题的代码：（不是所有内容，只有重要的内容）

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>时，都会重新渲染该并失去与砌体的绑定，这使我无法对其进行任何进一步的操作，这我真的不明白为什么这样做，因为只有列表实际上已更新。

任何帮助深表感谢！

编辑：这是关于石工的reloadItems（）http://masonry.desandro.com/methods.html#reloaditems的文档

最佳答案

经过大量搜索和挖掘之后，似乎像我想的那样工作，我唯一缺少的是reloadItems（）不会触发Masonry进行的任何布局，因此在我重新加载已解决的项目后调用它这样的问题：

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