react-virtualized onRowsRendered占位符

Question

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

[RESOLVE] 为了减少用户分心，我在ReactVirtualized__Table__row类

中添加了一个css动画

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

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

Answer 1

我很高兴你找到了一个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)
  }
}