React Virtualized 是否支持 flex-wrap/inline-block 样式的项目包装？

Question

我目前有一个项目列表，例如 <ul><li/><li/>...</ul>，每个项目的样式都带有 display: inline-block。这些项目不是固定的高度或宽度，但我可能会让它们固定，并且每个项目都包含一个缩略图，有时还包含文本。

列表会随着 window 宽度的变化自动换行，没有水平滚动条。例如，列表可能从 3 个项目开始，它们都水平放置在 window:

内的一行中

| 1 2 3     |

然后添加更多项目，项目开始换行到第二行：

| 1 2 3 4 5 |
| 6 7 8     |

然后如果 window 宽度改变，项目将重新包装：

| 1 2 3 4 5 6 7 |
| 8             |

当有数千个项目时，性能肯定会受到影响，所以我想看看是否有办法将列表虚拟化。从我对文档的阅读来看，React Virtualized 库目前似乎不支持这一点，但我想检查一下。 Collection 组件看起来可能很接近，但我认为它不会随着 window 调整大小时动态更改宽度或高度。

如果可以实现这种项目包装，是否有任何示例实现？

Answer 1

From my reading of the docs, it doesn't seem like this is currently supported by the React Virtualized library

我很想知道文档的哪一部分给了您这样的印象。您的用例听起来像是一个反应虚拟化的案例，可以很好地处理。 :)

The Collection component seems like it might be close

Collection 用于其他用途。也许 these slides from a recent conference talk I gave 可以澄清一点。基本上，Collection 用于非线性数据（例如甘特图、Pinterest 布局等）。它更灵活，但会以性能成本为代价。您的用例听起来非常适合 List。 :)

更新答案

您可以使用 List 和 AutoSizer 来完成此操作。您只需要使用可用宽度和项目高度来计算行数。不太复杂。 :)

Here is an example Plunker 这是来源：

const { AutoSizer, List } = ReactVirtualized

const ITEMS_COUNT = 100
const ITEM_SIZE = 100

// Render your list
ReactDOM.render(
  <AutoSizer>
    {({ height, width }) => {
      const itemsPerRow = Math.floor(width / ITEM_SIZE);
      const rowCount = Math.ceil(ITEMS_COUNT / itemsPerRow);

      return (
        <List
          className='List'
          width={width}
          height={height}
          rowCount={rowCount}
          rowHeight={ITEM_SIZE}
          rowRenderer={
            ({ index, key, style }) => {
              const items = [];
              const convertedIndex = index * itemsPerRow;

              for (let i = convertedIndex; i < convertedIndex + itemsPerRow; i++) {
                items.push(
                  <div
                    className='Item'
                    key={i}
                  >
                    Item {i}
                  </div>
                )
              }

              return (
                <div
                  className='Row'
                  key={key}
                  style={style}
                >
                  {items}
                </div>
              )
            }
          }
        />
      )
    }}
  </AutoSizer>,
  document.getElementById('example')
)

初始答案

以下是我或多或少会做的事情：

export default class Example extends Component {
  static propTypes = {
    list: PropTypes.instanceOf(Immutable.List).isRequired
  }

  constructor (props, context) {
    super(props, context)

    this._rowRenderer = this._rowRenderer.bind(this)
    this._rowRendererAdapter = this._rowRendererAdapter.bind(this)
  }

  shouldComponentUpdate (nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState)
  }

  render () {
    const { list } = this.props

    return (
      <AutoSizer>
        {({ height, width }) => (
          <CellMeasurer
            cellRenderer={this._rowRendererAdapter}
            columnCount={1}
            rowCount={list.size}
            width={width}
          >
            {({ getRowHeight }) => (
              <List
                height={height}
                rowCount={list.size}
                rowHeight={getRowHeight}
                rowRenderer={this._rowRenderer}
                width={width}
              />
            )}
          </CellMeasurer>
        )}
      </AutoSizer>
    )
  }

  _getDatum (index) {
    const { list } = this.props

    return list.get(index % list.size)
  }

  _rowRenderer ({ index, key, style }) {
    const datum = this._getDatum(index)

    return (
      <div
        key={key}
        style={style}
      >
        {datum.name /* Or whatever */}
      </div>
    )
  }

  _rowRendererAdapter ({ rowIndex, ...rest }) {
    return this._rowRenderer({
      index: rowIndex,
      ...rest
    })
  }
}

React Virtualized 是否支持 flex-wrap/inline-block 样式的项目包装？

Is a flex-wrap/inline-block style of item wrapping supported by React Virtualized?

reactjs

react-virtualized

更新答案

初始答案