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