react-virtualized - React Virtualized - 如何滚动到具有动态高度的行内的 div

Question

我正在使用 RV 列表加载具有自定义格式的大型文档。它非常有效，但我遇到了以下两个问题:
我目前在 cellmeasurer 中设置了一个列表 based on this计算行的动态高度(宽度是固定的)。我设法使用 scrollToindex 找到我想要的行，但有些行非常大，我希望能够滚动到行中的特定位置。我知道我需要使用 scrollTop 来这样做，但我不知道如何获取当前行的顶部 + 行内 div 的偏移量以使其正确滚动到正确的位置。我看到了an answer to a similar question其中发布了以下代码:

function render ({ scrollToIndex, ...rest }) {
// Convert scrollToIndex to scrollStop
const scrollTop =
  **rowOffset** + // Position of row within List
  **innerOffset** // Position of inner target within row

这是我的代码:

<AutoSizer>
            {({ width, height }) => (
              <CellMeasurer
                cellRenderer={({index, isScrolling, style, key  }) => SectionRenderer(index, key, style)}
                columnCount={1}
                rowCount={getSectionCount}
                width={width}
                >
                {({ getRowHeight }) => (
                  <List
                    height={height}
                    rowHeight={getRowHeight}
                    rowCount={getSectionCount}
                    rowRenderer={({ index, isScrolling, style, key  }) => SectionRenderer(index, key, style)}
                    overscanRowCount={10}
                    width={width}
                    scrollToIndex={scrollToSectionIndex}
                    />
                )}
              </CellMeasurer>
            )}
</AutoSizer>

我面临的另一个问题是，虽然我将文档分成 block ，每个 block 都以标签结尾，以确保文本的流畅流动(无重叠)，但出于某种原因，文本中的某些点单元格测量器忽略导致重叠的行 div 的最后一行文本的高度。我还没有设法找到关于列表中重叠发生位置的一致模式。您对我如何调试此问题有任何指示吗:例如。单独测量给定部分并将其与从 CellMeasurer 返回的测量值进行比较？

Answer 1

你的问题的前半部分有点棘手。您可以在内部 SizeAndPositionManager(用于管理行大小)上获取一个 hanlde 并查询它以获得更准确的偏移信息。最简单的方法是使用 cellRangeRenderer 回调，大致如下:

import { defaultCellRangeRenderer, Grid } from 'react-virtualized'

class GridWrapperExample extends Component {
  constructor (props, context) {
    super(props, context)

    this._cellRangeRenderer = this._cellRangeRenderer.bind(this)
  }

  render () {
    return (
      <Grid
        cellRangeRenderer={this._cellRangeRenderer}
        {...this.props}
      />
    )
  }

  _cellRangeRenderer (props) {
    this._rowSizeAndPositionManager = props.rowSizeAndPositionManager

    return defaultCellRangeRenderer(props)
  }
}

我猜测关于轻微的文本重叠问题是它可能与继承的样式有关。取自the docs :

Cells may be measured outside of the context of their intended Grid (or List). This means that they will not inherit the parent styles while being measured. Take care not rely on inherited styles for things that will affect measurement (eg font-size). (See issue 352 for more background information.)

Certain box-sizing settings (eg box-sizing: border-box) may cause slight discrepancies if borders are applied to a Grid whose cells are being measured. For this reason, it is recommended that you avoid placing borders on a Grid that uses a CellMeasurer and instead style its parent container. (See issue 338 for more background information.)