反应虚拟化 onRowsRendered 占位符

Question

我正在使用反应虚拟化Table。我想在 onRowsRendered InfiniteLoader 上呈现像这样的行时添加占位符。我可以在处理预取数据时使用这种数据占位符吗？

[解决] 为了减少用户分心，我添加了一个 css 动画到 ReactVirtualized__Table__row class

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

反应虚拟化 onRowsRendered 占位符

react-virtualized onRowsRendered placeholder

reactjs

react-virtualized