Реагирование рендеринга испортило мою привязку ref с масонством

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> повторно оказанной, и теряет его связывания с кладкой, которая делает меня неспособным сделать что-нибудь еще с этим, что я действительно не понимаю, почему это происходит, поскольку только список фактически обновляется.

Любая помощь очень ценится!

Edit: Вот документация по reloadItems кирпичной кладки (в) http://masonry.desandro.com/methods.html#reloaditems

Answer 1

После долгих поисков и роют вокруг, кажется, что это был добрейшей работать, как я планировал, единственное, что мне не хватало, что reloadItems () не вызывает какого-либо макетирования, выполненного масонством, поэтому, называя его после перезагрузки элементов, проблема решена так:

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