React虛擬化列表滾動出視圖

Question

我有一個工作的虛擬滾動網格，以在頁面上按部分顯示文檔。我現在爲搜索結果添加了另一個房車，但由於某種原因，當我向下滾動時，內容會滾動出來！我試圖簡化它只使用一個預定高度的List並消除潛在因素，它仍然給了我這個奇怪的錯誤。代碼本身按預期工作，它是表現出來的列表。 （我實際上使用Cell Measurer來獲取行高，但即使使用以下版本，它也會起作用）。 下面是代碼：

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

感謝

Answer 1

但由於某些原因的內容滾出視圖時，我向下滾動！

這幾乎總是由缺少的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} 
    /> 
) 
} 

注意添加key和style屬性。 ;）