react-virtualized onRowsRendered占位符

2017-03-28 33 views 0 likes

我正在使用react-virtualized表。我想在onRowsRendered InfiniteLoader上渲染看起来像这样的行时添加占位符。在处理预取数据时，我可以使用这种数据占位符吗？react-virtualized onRowsRendered占位符

【解析】为了减少用户分心我添加了一个CSS动画ReactVirtualized__Table__row类

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

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

来源

2017-03-28 crowmw

如果你已经有数据，为什么你需要一个占位符？ – FakeRainBrigand

由于渲染复杂行需要很长时间，用户在一段时间内会看到空白区域，然后跳入可能会分散注意力的数据。 – crowmw

回答

我很高兴你找到了一个CSS的解决方案。只要你知道，你可以使用JavaScript完成你的原始目标，也可以为你的Table指定一个自定义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) 
    } 
}

来源

2017-03-28 16:09:10 brianvaughn

react-virtualized onRowsRendered占位符

回答

相关问题