Question

<List />内<InfiniteLoader />，<AutoSizer />内，<WindowScroller />和<WindowScroller /> {哇，hoc s <List />但是为了简单起见，我认为我的问题可以与简单的prop 组件相同。

我不确定是否有办法呈现某种分隔符或标题，就像下面呈现的部分（数据片段）的标题一样

由于每个项都有一个[ { item: 1, name: 'Banana', kind: 'fruits', }, { item: 2, name: 'Apple', kind: 'fruits', }, { item: 3, name: 'Watermelon', kind: 'fruits', }, { item: 4, name: 'Dog', kind: 'animals', }, { item: 5, name: 'Cat', kind: 'animals', }, { item: 6, name: 'Horse', kind: 'animals', }, //... ]，允许以数据块的形式对数据进行分组，而且我收到的数据是按顺序排列的，并且分组如下：

<ul>
  <li className="fullWidth">
    <h3>Fruits</h3>
  </li>
  <li>Banana</li>
  <li>Apple</li>
  <li>Watermelon</li>
  <li className="fullWidth">
    <h3>Animals</h3>
  </li>
  <li>Dog</li>
  <li>Cat</li>
  <li>Horse</li>
</ul>

这个想法是渲染类似：

rowRenderer

在<List />方法中进行一些计算？

或者，因为我将<InfiniteLoader />包裹在loadMoreRows中我可以在火rowRenderer时传递参数，但无论如何我认为我必须在{{1}中进行一些计算}，负责最终render。

Answer 1

这是可能的，但如果您的数据已预先排序以便不交错组，则可以更轻松。你基本上有两个选择：

将您的数据预展平为2种类型的数组。一种是标题，另一种是儿童。如果您希望标题与常规行的大小不同，则还需要提供rowHeight getter函数，该函数能够区分标题项和子项并返回不同的值。您的rowRenderer也需要这样做。
将当前数据的“种类”与之前的数据进行比较，如果它们不同，则包含带有渲染行的标题。此方法还需要自定义rowHeight getter，但不需要任何数据展平，因此可能更容易/更快。唯一的缺点是，如果您采用这种方式，您的标题和行项目将在同一div（或li）内。

以下是选项2的示例：docs

这是相关的代码位：

function includeHeader(index) {
  return (
    index === 0 ||
    list[index].kind !== list[index - 1].kind
  );
}

function rowHeight({ index }) {
  return includeHeader(index)
    ? ROW_HEIGHT_WITH_HEADER
    : ROW_HEIGHT;
}

function rowRenderer({ index, isScrolling, key, style }) {
  const datum = list[index];

  return (
    <div
      className='Row'
      key={key}
      style={style}
    >
      {includeHeader(index) && (
        <h3>{...}</h3>
      )}
      <div>{...}</div>
    </div>
  );
}

有没有办法在反应虚拟化中添加分隔数据的标题

1 个答案: