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

非常感谢任何帮助！

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

的文档

Answer 1

经过多次搜索和挖掘，看起来它像我想要的那样工作，我唯一缺少的是reloadItems（）不会触发砌体完成任何布局，所以在我重新加载后调用它这些项目解决了这个问题：

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

React渲染正在弄乱我与砌体的ref绑定

1 个答案: