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

我正在使用RV List加载具有自定义格式的大型文档。它起到了很好的作用，但我遇到了以下两个问题：
我目前在cellmeasurer中设置了一个列表来计算行的动态高度（宽度是固定的）。我设法使用scrollToindex查找我想要的行，但有些行相当大，我希望能够滚动到行中的特定位置。我知道我需要使用scrollTop来执行此操作，但我不知道如何获取当前行的top+行内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>

{（{宽度，高度}）=>(
SectionRenderer（索引、键、样式）}
columnCount={1}
行计数={getSectionCount}
宽度={width}
>
{（{getRowHeight}）=>(
SectionRenderer（索引、键、样式）}
过扫描行计数={10}
宽度={width}
scrollToIndex={scrollToSectionIndex}
/>
)}
)}

---

我面临的另一个问题是，尽管我将文档分割成块，每个块都以一个标记结尾，以确保文本流畅（无重叠），由于某些原因，文本中的某些点的单元格度量值忽略了行div的最后一行文本的高度，从而导致重叠。我还没有找到列表中重叠发生位置的一致模式。你有什么建议我如何调试这个问题：例如，单独测量给定的部分，并将其与CellMeasurer返回的测量值进行比较？

你的问题的前半部分有点棘手。您可以在内部的

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)
  }
}

从“react virtualized”导入{defaultCellRangeRenderer，Grid}
类GridWrapperExample扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）
this.\u cellRangeRenderer=this.\u cellRangeRenderer.bind（this）
}
渲染（）{
返回(
)
}
_CellRange渲染器（道具）{
此._rowSizeAndPositionManager=props.rowSizeAndPositionManager
返回defaultCellRangeRenderer（道具）
}
}

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

可以在其预期的

网格

（或

列表

）的上下文之外测量单元格。这意味着它们在测量时不会继承父样式。注意不要依赖继承的样式来处理会影响度量的内容（例如字体大小）。（有关更多背景信息，请参阅第352期。）

如果将边框应用于正在测量单元格的网格，则某些框大小设置（例如

框大小：边框框

）可能会导致轻微差异。因此，建议您避免将边框放置在使用

CellMeasurer

的

网格上，而是设置其父容器的样式。（有关更多背景信息，请参阅第338期。）

谢谢这正是我想要的。然而，我现在遇到了一个问题，为了使用
let target=**document.getElementById（divId）**；让innerOffset=目标？target.offsetTop:0dom首先需要呈现节。否则它找不到该div。它当前仅在该div已在可滚动区域内时才起作用。我不能做超时。。。我尝试了setTimeout，但在render函数中不起作用。你对如何延迟卷轴的第二部分直到扇面被渲染有什么建议吗？感谢您的回答，它最终完全按照预期工作（使用mobx）：
@observable delayedScrollTo=0；onNextFrame（cb）。。。componentDidUpdate（prevProps，prevState）{if（this.props.scrollToDivId！=prevProps.scrollToDivId）{let rowInfo=this.\u rowSizeAndPositionManager.getSizeAndPositionOfCell（this.props.scrollToIndex）；this.onExtFrame（（）=>{let target=document.getElementById（this.props.scrollToDivId）；let innerOffset=target？target.offsetTop:0；this.delayedScrollTo=innerOffset；}）}