reactjs - 水平滚动后失去样式

Question

我正在组合react-window-scroller, react-window, and react-table- 我在水平滚动时遇到问题。似乎它失去了每一行的样式。尝试向下滚动一点，然后水平滚动 - 所有内容都消失了，现在尝试垂直滚动并再次显示？

发布网址： https ://codesandbox.io/s/react-window-full-height-page-scroll-7zg47?file=/src/App.js

我不确定是什么导致了这个问题。如果我删除列表中的样式属性，可以正常工作，但是我失去了滚动到窗口的功能......

Answer 1

一个潜在但非常丑陋的解决方案是触发 onScroll 的滚动事件：

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>

我不认为这是一个好的解决方案，但目前，我看不到任何其他解决方案。我希望有人有更好的解决方案来解决这个问题？:)