反応仮想化onRowsRenderedプレースホルダ

Question

反応仮想化テーブルを使用しています。私はonRowsRendered InfiniteLoaderでこのような行をレンダリングしながらプレースホルダーを追加したいと思います。プリフェッチされたデータを扱う際に、この種のデータプレースホルダを使用できますか？

ユーザー気晴らしを減らすために[RESOLVE] 私はあなたがCSSの解決策を見つけたうれしいReactVirtualized__Table__rowクラスに

@keyframes showRow { 
    0% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1 
    } 
} 

.ReactVirtualized__Table__row { 
    animation: 0.8s 0s 1 showRow; 
} 

Answer 1

をCSSアニメーションを追加しました。 JavaScriptを使用してオリジナルの目標を達成するには、のカスタムrowRendererを指定します。

import { defaultTableRowRenderer, Table } from 'react-virtualized' 

function renderTable (props) { 
    return (
    <Table 
     rowRenderer={rowRenderer} 
     {...props} 
    /> 
) 
} 

function rowRenderer (props) { 
    if (props.isScrolling) { 
    return (
     <YourScrollPlaceholderWidget 
     key={props.key} 
     style={props.style} 
     /> 
    ) 
    } else { 
    return defaultTableRowRenderer(props) 
    } 
}