React Virtualized 结合自定义表格和 Window Scroller答案

【问题标题】：React Virtualized combining custom table and Window ScrollerReact Virtualized 结合自定义表格和 Window Scroller
【发布时间】：2018-01-18 20:57:58
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-virtualized

【解决方案1】：

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

编辑：

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

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

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

【讨论】：

除了这个github.com/bvaughn/react-virtualized/blob/master/docs/… 用于窗口滚动器之外，还有更多的文档吗？
是的 - 看我的编辑 - 你不想设置 <WindowScroller /> 本身的样式，你想设置内部组件的样式，比如 <Table /> 对吗？
克里斯托弗是正确的。 WindowScroller 没有任何表示层。它只是监视“滚动”事件并将scrollTop 传递给它包装的任何 RV 组件。（这就是为什么没有很多道具的原因。）
好的，我在阅读文档后开始工作。谢谢。