我如何告訴砌體組件它的單元已經改變了它們的高度？

Question

我有一個反應組件，它顯示網格模式中的項目的一維列表。每個項目都有相同的寬度和高度，它們位於三列內。可以有很多這樣的東西，所以我決定使用Masonry組件進行反應 - 虛擬化，這個組件似乎是爲了這個用例而寫的。它的效果很好，但有一點需要注意：如果物品改變高度，我不能讓砌體注意。

這裏的一個減小的例子：

constructor(props) { 
    [...] 
    this.cellMeasurerCache = new CellMeasurerCache({ 
     defaultHeight: this.state.height, 
     fixedWidth: true, 
    }); 

    this.cellPositioner = createMasonryCellPositioner({ 
     cellMeasurerCache: this.cellMeasurerCache, 
     columnCount: 3, 
     columnWidth: 250, 
     spacer: 20, 
    }); 
} 

[...] 

cellRenderer({ index, key, parent, style }) { 
    return (
     <CellMeasurer 
      cache={this.cellMeasurerCache} 
      index={index} 
      key={key} 
      parent={parent} 
     > 
      <div style={style}> 
       [...] 
      </div> 
     </CellMeasurer> 
    ); 
} 

resetMasonry() { 
    this.cellMeasurerCache.clearAll(); 

    this.cellPositioner.reset({ 
     cache: this.cellMeasurerCache, 
     columnCount: 3, 
     columnWidth: 250, 
     spacer: 20, 
    }); 

    this.masonryRef.recomputeCellPositions(); 
} 

render() { 
    return (
     <AutoSizer> 
      {({ height, width }) => 
       <Masonry 
        cellCount={this.state.list.length} 
        cellMeasurerCache={this.cellMeasurerCache} 
        cellPositioner={this.cellPositioner} 
        cellRenderer={this.cellRenderer} 
        height={height} 
        ref={this.setMasonryRef} 
        width={width} 
       /> 
      } 
     </AutoSizer> 
    ); 
} 

resetMasonry當組件的高度的狀態已經改變時被調用。我已經從幾個stackoverflow答案和其他資源中檢索了當前的代碼，甚至查看了源代碼，但沒有任何結果。我注意到，我沒有告訴cellMeasurerCache或其他關於高度變化的事情，所以我真的不應該期待它的工作，但似乎沒有辦法在那裏獲取信息，甚至沒有實例化新的CellMeasurerCache。順便說一下，如果我更改cellPositioner.reset中的columnWidth，那麼Masonry組件會相應地進行更新，果不其然。

有沒有人知道我錯過了什麼讓它工作的高度變化？謝謝！

Answer 1

如果您的Masonry單元的尺寸發生變化，您需要清除CellMeasurerCache中的緩存尺寸，然後確保cellPositioner也知道新的尺寸。例如：

// Clear cached measurements since sizes have changed: 
cellMeasurerCache.clearAll() 

// Let your component know it needs to re-render 
this.setState({...},() => { 
    // Assuming you're using the default createCellPositioner() 
    // Let it know of any values that may have changed: 
    cellPositioner.reset({ 
    columnCount, 
    columnWidth, 
    spacer 
    }) 

    // Tell Masonry to discard any cached position data: 
    masonryRef.clearCellPositions() 
}) 

您只需通過改變列寬看到Masonry成分與上RV site改變柱高度的演示。該演示的源代碼也可用in the GitHub repo。

從你所描述的，但我不會建議使用Masonry。我真的只是建議以類似的方式使用List來我在這個例子中是怎麼做：http://plnkr.co/edit/zjCwNeRZ7XtmFp1PDBsc?p=preview

關鍵位是計算每個動態基於可用寬度行項目的數量，然後你給List的調整爲rowCount：

const itemsPerRow = Math.floor(width/ITEM_SIZE); 
    const rowCount = Math.ceil(ITEMS_COUNT/itemsPerRow);