仮想化されたリストを表示外にスクロール

Question

ページ上のセクションでドキュメントを表示するための作業用の仮想スクロールグリッドがあります。私は今検索結果のためにもう1つのRVを追加しましたが、何らかの理由でスクロールダウンすると内容がスクロールして表示されなくなりました!!私はそれを単純化し、あらかじめ決められた高さのリストを使用して潜在的な要因を排除しようとしましたが、それでも私にはこの奇妙なバグがありました。コード自体は期待どおりに動作し、動作しているリストです。 （私は実際に行の高さを得るために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値が原因です。これに

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

：：（。hereを参照）

をあなたのケースでは、この変更する必要があり

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

を追加keyとstyle属性に注意してください。 ;）