具有反应虚拟化的多个表

【问题标题】：Multiple tables with react-virtualized具有反应虚拟化的多个表
【发布时间】：2018-10-16 21:45:30
【问题描述】：

我想在一个页面上显示多个表格。在两者之间，我想要一个跨越整个页面宽度的“页眉”和“页脚”行。像这样：

<div>Some header text here</div>
<table>
    ....
</table>
<div>Some footer text here</div>
<div>Some header text here</div>
<table>
    ....
</table>
<div>Some footer text here</div>
<div>Some header text here</div>
<table>
    ....
</table>
<div>Some footer text here</div>

react-virtualized 可以做到这一点吗？

现在我正在努力使它像一个反应虚拟化列表，然后将它全部渲染为不同的 div。

【问题讨论】：

标签： reactjs react-virtualized

【解决方案1】：

如果您使用不同的（多个）表格进行此操作 - 您只需将另一个表格添加到您的页面。但是如果你需要同步滚动表，你可以使用官方网站上的这个例子。（根据您的情况稍作修改）。

import { Grid, List, ScrollSync } from 'react-virtualized'
import 'react-virtualized/styles.css'; // only needs to be imported once

function render (props) {
  return (
    <ScrollSync>
      {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => (
      <div className='Table'>
        <div className='LeftColumn'>
          <List
            scrollLeft={scrollLeft}
          {...props}
        />
      </div>
      <div className='RightColumn'>
        <Grid
          onScroll={onScroll}
          {...props}
        />
      </div>
    </div>
  )}
</ScrollSync>

) }

【讨论】：