3

我正在使用 RV List 加载具有自定义格式的大型文档。它就像一个魅力，但我遇到了以下两个问题：我目前在 cellmeasurer 中基于此
设置了一个列表来计算行的动态高度（宽度是固定的）。我设法使用 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 的最后一行文本的高度。我还没有设法找到关于列表中重叠发生位置的一致模式。你有什么指示我如何调试这个问题：例如。单独测量给定部分并将其与 CellMeasurer 返回的测量值进行比较？

4

1 回答 1

1

你问题的前半部分有点棘手。您可以在内部获得一个 hanlde SizeAndPositionManager（用于管理行大小）并查询它以获取更准确的偏移信息。这样做的最简单的方法是使用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)
  }
}

我对轻微文本重叠问题的猜测是它可能与继承的样式有关。取自文档：

单元格可以在其预期Grid（或List）的上下文之外进行测量。这意味着它们在测量时不会继承父样式。注意不要依赖继承的样式来影响测量（例如字体大小）。（有关更多背景信息，请参阅问题 352。）

box-sizing: border-box如果将边框应用于Grid正在测量的单元格，则某些框大小设置（例如）可能会导致轻微的差异。因此，建议您避免在Grid使用 a 的 a上放置边框CellMeasurer，而是设置其父容器的样式。（有关更多背景信息，请参阅问题 338。）

于 2016-12-12T23:40:41.517 回答