リアクションレンダリングは私のrefバインディングをメーソンリーと混同しています

Question

<ul>リストは<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

Answer 1

にと周り掘り、私が意図していたとして、それは一種-の作業だったように、私が行方不明になった唯一のものは、（そのreloadItemsだったようです）は、Masonryによって行われたレイアウトを引き起こさないので、アイテムを再ロードして呼び出すと、次のような問題が解決されます。

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