Question

我似乎找不到在VirtualizedList中处理/添加分隔符的任何道具，那么如何为VirtualizedList添加自己的分隔符组件？或者我必须使用FlatList？

注意：我想避免使用FlatList，因为传入的数据是不可变类型。

Answer 1

您可以创建自己的分隔器组件并根据元素类型映射来呈现元素。

const separatorComp = fromJS([
    key: 'some-uniq-key', type: rowType.separator, 
]);

const Separator = ({ <if needed to pass some props> }) => {
    <br><br> <Some kind of separator or something maybe your own component>
};

const rowTypes = {
    separator: 0,
};

const typeElementHash = {
    [rowTypes.separator]: Separator;
}

const baseRowRenderer = ({
cellMeasurerCache,
virtualizedList,
  ...props
}) => ({ index, parent, style }) => {
  const data = virtualizedList.get(index);
  const key = data.get('key');
  const Element = typeElementHash[data.get('type')];
  return (
    <CellMeasurer
      key={key}
      cache={cellMeasurerCache}
      columnIndex={0}
      parent={parent}
      rowIndex={index}
    >
      <div style={style}>
        <Element {...props} data={data} index={index} />
      </div>
    </CellMeasurer>
  );
};

VirtualizedList组件分隔符

1 个答案: