2

我有一个<List />inside an <InfiniteLoader />， inside an <AutoSizer />，also<WindowScroller />和<WindowScroller /> （哇，那里有这么多hoc），但为了简单起见，我认为我的问题可以与一个简单的<List /> Component相同。

我不确定是否有办法呈现某种分隔符或标题，例如下面呈现的部分（数据段）的标题。

由于每个项目都有一个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 />在 an 中，所以<InfiniteLoader />我可以在 fire 时传递一个参数loadMoreRows，但无论如何我认为我必须在 中进行一些计算rowRenderer，负责最终的render.

4

1 回答 1

2

这是可能的，但如果您的数据是预先排序的，这样组就不会交错，会容易得多。你基本上有2个选择：

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

这是选项 2 的示例：https ://plnkr.co/edit/l22Ir7?p=preview

这是相关的代码位：

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>
  );
}
于 2017-04-26T15:33:32.720 回答