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

Question

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

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>

我遇到的另一个问题是，虽然我将文档分成块，每个块都以标签结尾，以确保文本流畅（无重叠），但出于某种原因，文本中有一些要点其中单元格测量器忽略了行 div 的最后一行文本的高度，导致 overlap.I 尚未设法找到关于列表中重叠位置的一致模式。您对我如何调试此问题有任何指示吗：例如。单独测量给定部分并将其与从 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.)

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

React Virtualized - how to scroll to div within row with dynamic height

react-virtualized