gpt4 book ai didi

reactjs - React 虚拟化列表滚动到 View 之外

转载 作者:行者123 更新时间:2023-12-02 04:02:14 25 4
gpt4 key购买 nike

我有一个工作虚拟滚动网格,用于按页面上的部分显示文档。我现在为搜索结果添加了另一个 RV,但由于某种原因,当我向下滚动时,内容会滚动到 View 之外!我试图将其简化为仅使用具有预定高度的列表并消除潜在因素,但它仍然给了我这个奇怪的错误。代码本身按预期工作,它是正在运行的列表。 (我实际上使用单元格测量器来获取行高,但即使使用以下版本,它也会起作用)。这是代码:

const rowRenderer = ({ index, isScrolling, style, key  }) => 
this.resultRowRenderer(index, key, style, curList)

resultRowRenderer(index, key, style, list) {
...
return <Markup content={quote} onClick={() => jumpToLocCallback(location)} />
}

render() {
...
const renderList = (curList, i) => {
const rowCount = curList.results.length

return (
<List
key={i}
height={100}
rowHeight={30}
rowCount={rowCount}
rowRenderer={rowRenderer}
overscanRowCount={0}
width={700}
ref={(ref) => this.List = ref}
/>
)
}

const renderLists = searchResultsLists.map(renderList)

return (
<div className='results-sidebar'>
{renderLists}
</div>
)
}

谢谢

最佳答案

but for some reason the contents scroll out of view when I scroll down!!

这几乎总是由缺少 style 值引起的。 (参见here。)

就您而言,您应该更改此设置:

resultRowRenderer(index, key, style, list) {
quote = '...'
return <Markup content={quote} onClick={() => jumpToLocCallback(location)} />
}

对此:

resultRowRenderer(index, key, style, list) {
quote = '...'
return (
<Markup
content={quote}
key={key}
onClick={() => jumpToLocCallback(location)}
style={style}
/>
)
}

请注意添加的 keystyle 属性。 ;)

关于reactjs - React 虚拟化列表滚动到 View 之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41323633/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com