reactjs - react-virtualized onRowsRendered 占位符

Question

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

[解决] 为了减少用户分心，我在 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 来实现您的原始目标，方法是rowRenderer为您的Table.

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)
  }
}