React虛擬化結合自定義表格和窗口滾動

Question

我想結合自定義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>

Answer 1

絕對審查文檔。您可能會將某種類型的道具style和event道具傳遞給組件 - 因此您需要了解這些組件如何定義和接受這些道具。這隻能通過查看圖書館的文件來實現。

編輯：

這裏是爲<Table />組件propTypes：

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

你會看到，它接受自定義事件處理像onRowClick而且風格的道具像rowStyle