React 渲染弄乱了我与 Masonry 的 ref 绑定答案

【问题标题】：React rendering is messing up my ref binding with MasonryReact 渲染弄乱了我与 Masonry 的 ref 绑定
【发布时间】：2016-12-26 09:54:44
【问题描述】：

所以我有一个 <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> 都会重新渲染并失去与砖石的绑定，这使我无法对其进行进一步处理，我真的不明白为什么会这样，因为实际上只更新了列表。

非常感谢任何帮助！

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

【问题讨论】：

标签： javascript reactjs masonry

【解决方案1】：

经过大量搜索和挖掘，它似乎有点像我预期的那样工作，我唯一缺少的是 reloadItems() 不会触发 Masonry 完成的任何布局，所以在我重新加载后调用它这些项目解决了这样的问题：

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

【讨论】：