Question

我想在页面上显示多个表格。在这之间，我想要一个＆＃34;标题＆＃34;和＆＃34;页脚＆＃34;跨越整个页面宽度的行。像这样：

<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吗？

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

Answer 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>

） }

具有反应虚拟化的多个表

1 个答案: