反应虚拟化的List和CellMeasurer

时间:2019-11-15 14:45:16

标签: reactjs react-virtualized

请问有人可以看看我的react-virtualized设置吗? 我敢肯定它的设计不正确,因为未正确测量像元高度。

https://gist.github.com/zackster/31fb5a983a33b303626cd8ae9dee3b94

我是React.js的新手(这是我在React中的第一个项目,因此一些不良的设计可能是由于该原因)。我将度量传递到ChatHistoryCell中,该度量传递到各个子组件中,这些子组件不可避免地在各自的componentDidMount事件上调用它。

我基本上有三个主要错误。

  1. 我希望它在第一次加载后立即滚动到底部。不确定如何执行此操作?该组件似乎重新渲染了很多东西,所以答案可能涉及一个状态标志? 您会注意到this._list.scrollToRow(selectedThread.chat_log.length - 1);中的要点当前有componentDidUpdate(),但是它不起作用

  2. 计算出的行高通常是非常错误的。

  3. 如果我调整窗口宽度的大小,然后调用以下方法:

        selectedConversation.cellMeasurerCache.clearAll();
        selectedConversation.cellMeasurer.resetMeasurements();
        selectedConversation.listRef.recomputeRowHeights();
        selectedConversation.listRef.forceUpdateGrid();

调整大小后,它看起来很糟糕。但是,如果我在视图中滚动 ,然后在视图中返回 ,则它看起来不错,并调整为新的宽度。

0 个答案:

没有答案