반응 가상화 된 onRowsRendered 자리 표시 자

Question

반응 가상화 표를 사용 중입니다. onRowsRendered InfiniteLoader에서 이와 같이 보이는 행을 렌더링하는 동안 자리 표시자를 추가하고 싶습니다. 프리 패치 데이터에서 작업 할 때 이런 종류의 데이터 자리 표시자를 사용할 수 있습니까?

[RESOLVE] 사용자의 혼란을 줄이기 위해 I 클래스를

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

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

Answer 1

나는 당신이 CSS 솔루션을 발견 기뻐요을 ReactVirtualized__Table__row하기 위해 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) 
    } 
}