反應渲染搞亂了我的參考與砌體結合

所以我有<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>進行重新渲染，失去約束力與石工，這使我無法做任何進一步的事情，我不明白爲什麼它，因爲只有列表實際更新。

任何幫助非常感謝！

編輯：這裏有砌體的reloadItems（）http://masonry.desandro.com/methods.html#reloaditems

來源

2016-12-26 MarcusWasTaken

經過一番搜索和挖掘各地的文件，好像它是一種-，因爲我本來打算工作，我唯一缺少的是reloadItems（）不會觸發砌體完成的任何佈局，因此在重新加載項目後調用它可以解決問題，例如：

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

來源

2016-12-26 10:43:34 MarcusWasTaken

反應渲染搞亂了我的參考與砌體結合

回答

相關問題