Реагировать на виртуализированный список прокрутки из вида

Question

У меня есть рабочая виртуальная прокрутка Сетка для отображения документа по разделам на странице. Теперь я добавил еще один 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. (См. 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 атрибуты. ;)