#reactjs #react-table #react-window
#reactjs #react-таблица #реагировать-окно
Вопрос:
Я комбинирую react-window-scroller, react-window, and react-table
— у меня возникают проблемы при прокрутке по горизонтали. Похоже, что он теряет стиль в каждой строке. Попробуйте прокрутить немного вниз, а затем прокрутить по горизонтали — все содержимое исчезает, теперь попробуйте прокрутить по вертикали, и оно снова появится?
URL для выдачи: https://codesandbox.io/s/react-window-full-height-page-scroll-7zg47?file=/src/App.js
Я не уверен, что вызывает эту проблему. Если я удалю свойство styling в списке, in работает, но затем я теряю функциональность прокрутки до окна…
Комментарии:
1. Я не вижу никаких проблем со стилем по ссылке. Похоже, что при отображении оставшегося списка во время прокрутки возникает задержка.
2. Попробуйте прокрутить список вниз (далеко вниз), а затем попробуйте прокрутить по горизонтали, после чего содержимое исчезнет
3. Попробуйте сделать экран маленьким и попробуйте… Затем вы можете воссоздать его заново… Это происходит, как только некоторые столбцы не видны, и вам нужно прокручивать их по горизонтали, чтобы увидеть их… Может быть, какие-то вычисления идут не так?
4. Я обновил экран / видеоряд проблемы
Ответ №1:
Потенциальным, но ДЕЙСТВИТЕЛЬНО уродливым решением является запуск события прокрутки при прокрутке:
const triggerScroll = () => {
window.dispatchEvent(new CustomEvent('scroll'));
};
<VariableSizeList
ref={ref}
outerRef={outerRef}
height={window.innerHeight}
style={{...style, overflow: 'hidden'}}
itemCount={data.length 1}
itemSize={() => 29}
onScroll={triggerScroll}
itemData={rows}
>
{renderRow}
</VariableSizeList>
Я не думаю, что это хорошее решение, но на данный момент я не вижу другого способа решить эту проблему. Я надеюсь, что у кого-то есть лучшее решение этой проблемы? 🙂