reactjs - react 虚拟化 onRowsRendered 占位符

Question

我正在使用 react 虚拟化表。我想在 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 解决方案。如您所知，您也可以通过指定自定义 rowRenderer 使用 JavaScript 来实现最初的目标为您的表格。

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