ScrollSync似乎无法正确/快速地同步反应虚拟化

问题描述

我正在使用react-virtualized，我已经将它Scrollsync组件用于多个Grid。我遵循了源代码，但各列之间存在滞后。实际上，我有大量的数据，这就是为什么我在这里使用反应虚拟化库的原因。

      <ScrollSync>
    {({ clientHeight,clientWidth,onScroll,scrollHeight,scrollLeft,scrollTop,scrollWidth }) => {
      const x = scrollLeft / (scrollWidth - clientWidth);
      const y = scrollTop / (scrollHeight - clientHeight);
      const BackgroundColor = "#fff";
      const TotalBackGroundColor = "rgb(63 81 181)";
      const textColor = "#000";
      return (
        <Paper className={classes.paper}>
          <thanosTabletoolbar
            title={options.title || ""}
            columns={columns}
            options={options}
            visibleColumns={visibleColumns} //OLD
            onColumnChange={handleColumnChange}
            groupBanners={groupBanners}
            ungroupBanners={ungroupBanners}
          />

          <div className="GridRow">
            {/* first row header */}
            {columns.length ? (
              <div className="LeftSideGridContainer" style={{ color: textColor,backgroundColor: BackgroundColor }}>
                <Grid cellRenderer={_renderLeftHeaderCell} className="HeaderGrid" width={state.firstColumnWidth} height={state.rowHeight} rowHeight={state.rowHeight} columnWidth={state.firstColumnWidth} rowCount={1} columnCount={1} />
              </div>
            ) : (
              <div></div>
            )}
            {/* left side first column header */}
            <div
              className="LeftSideGridContainer"
              style={{
                position: "absolute",height: state.rowHeight,top: state.rowHeight,color: textColor,backgroundColor: BackgroundColor,textAlign: "center",}}
            >
              {options.loading ? (
                <div></div>
              ) : (
                <Grid
                  overscanColumnCount={state.overscanColumnCount}
                  overscanRowCount={state.overscanRowCount}
                  cellRenderer={_renderLeftSideCell}
                  columnWidth={state.firstColumnWidth}
                  columnCount={1}
                  className="LeftSideGrid"
                  height={state.height - scrollbarSize()}
                  rowHeight={state.rowHeight}
                  rowCount={state.rowCount}
                  scrollTop={scrollTop}
                  width={state.firstColumnWidth}
                />
              )}
            </div>
            {/* for total header */}
            <div
              style={{
                position: "absolute",top: state.totalTop,color: "#fff",backgroundColor: TotalBackGroundColor,zIndex: 20,}}
            >
              {options.loading ? (
                <div></div>
              ) : (
                <Grid
                  overscanColumnCount={state.overscanColumnCount}
                  overscanRowCount={state.overscanRowCount}
                  cellRenderer={_renderTotalCell}
                  columnWidth={state.firstColumnWidth}
                  columnCount={1}
                  className="LeftSideGrid"
                  height={state.height - scrollbarSize()}
                  rowHeight={state.rowHeight}
                  rowCount={1}
                  scrollTop={scrollTop}
                  width={state.firstColumnWidth}
                />
              )}
            </div>
            <div className="GridColumn">
              <AutoSizer disableHeight>
                {({ width }) => (
                  //   remaining headers
                  <div>
                    <div style={{ backgroundColor: BackgroundColor,width: width - scrollbarSize() }}>
                      <Grid
                        className="HeaderGrid"
                        columnWidth={state.columnWidth}
                        columnCount={state.columnCount}
                        height={state.rowHeight}
                        overscanColumnCount={state.overscanColumnCount}
                        cellRenderer={_renderHeaderCell}
                        rowHeight={state.rowHeight}
                        rowCount={1}
                        scrollLeft={scrollLeft}
                        width={width - scrollbarSize()}
                      />
                    </div>
                    {/* remaining columns data  */}
                    <div
                      style={{
                        backgroundColor: BackgroundColor,height: state.height,width: width,}}
                    >
                      {options.loading ? (
                        <div>
                          <CircularProgress />
                        </div>
                      ) : (
                        <Grid
                          className="BodyGrid"
                          columnWidth={state.columnWidth}
                          columnCount={state.columnCount}
                          height={state.height}
                          onScroll={onScroll}
                          overscanColumnCount={state.overscanColumnCount}
                          overscanRowCount={state.overscanRowCount}
                          cellRenderer={_renderBodyCell}
                          rowHeight={state.rowHeight}
                          rowCount={state.rowCount}
                          width={width}
                        />
                      )}
                    </div>
                    {/* for column total  */}
                    <div
                      style={{
                        position: "absolute",backgroundColor: "rgb(63 81 181)",}}
                    >
                      {options.loading ? (
                        <div></div>
                      ) : (
                        <Grid
                          className="HeaderGrid"
                          columnWidth={state.columnWidth}
                          columnCount={state.columnCount}
                          height={state.rowHeight}
                          overscanColumnCount={state.overscanColumnCount}
                          cellRenderer={_renderLeftTotalCell}
                          rowHeight={state.rowHeight}
                          rowCount={1}
                          scrollLeft={scrollLeft}
                          width={width - scrollbarSize()}
                        />
                      )}
                    </div>
                  </div>
                )}
              </AutoSizer>
            </div>
          </div>
        </Paper>
      );
    }}
  </ScrollSync>

由于您可以在gif中看到滞后的问题，如果可以解决，请提供一些想法来解决此问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）