react-virtualized onRowsRendered 占位符答案

【问题标题】：react-virtualized onRowsRendered placeholderreact-virtualized onRowsRendered 占位符
【发布时间】：2017-03-28 08:24:41
【问题描述】：

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

[解决] 为了减少用户分心，我在 ReactVirtualized__Table__row 类中添加了一个 CSS 动画

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

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

【问题讨论】：

如果你已经有了数据，为什么还需要占位符？
因为复杂行的渲染时间太长，用户会看到一段时间的空白，然后跳入可能会分散注意力的数据。

标签： reactjs react-virtualized

【解决方案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)
  }
}

【讨论】：