React Virtualized 结合自定义 table 和 Window Scroller

Question

我正在尝试将自定义 CSS table 与反应虚拟化 window 滚动条结合起来。我目前可以让 table 显示，但我无法弄清楚如何将样式组合到 table，或向 table 行添加任何逻辑。

 <WindowScroller>
    {({ height, isScrolling, onChildScroll, scrollTop }) => (

      <Table
        autoHeight
        width={1000}
        height={700}
        headerHeight={20}
        rowHeight={30}
        isScrolling={isScrolling}
        onScroll={onChildScroll}
        rowCount={table.length}
        scrollTop={scrollTop}
        rowGetter={({ index }) => table[index]}
      >
        <Column
          label='Item1'
          dataKey='item1'
          width={150}
        />
        <Column
          width={200}
          label='item2'
          dataKey='item2'
        />
        <Column
          width={200}
          label='item3'
          dataKey='item3'
        />
        <Column
          width={150}
          label='item4'
          dataKey='item4'
        />
        <Column
          width={200}
          label='item5'
          dataKey='item5'
        />
      </Table>

    )}
  </WindowScroller>

Answer 1

一定要查看文档。您可能会将某种类型的 style 道具和 event 道具传递给组件 - 因此您需要了解这些组件如何定义和接受这些道具。这只能通过查看库的文档来实现。

编辑：

这里是 <Table /> 组件的 propTypes：

https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md

你会看到它接受像 onRowClick 这样的自定义事件处理程序，但也接受像 rowStyle

这样的样式道具

React Virtualized 结合自定义 table 和 Window Scroller

React Virtualized combining custom table and Window Scroller

reactjs

react-virtualized