Reactjs React是否支持项目包装的flex wrap/inline block样式的虚拟化？

我目前有一个项目列表，比如

…
，每个项目都使用
显示：内联块
。这些项目不是固定的高度或宽度，尽管我可能会使它们固定，并且每个项目都包含一个缩略图图像，有时还包含文本

随着窗口宽度的变化，列表会相应地换行，没有水平滚动条。例如，列表可能以3个项目开始，这些项目都水平放置在窗口中的一行上：

| 1 2 3     |

然后再添加一些项目，项目开始换行到第二行：

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

然后，如果窗口宽度更改，则项目将重新包装：

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

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

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

从我对文档的阅读来看，React虚拟化库目前似乎不支持这一点

我很想知道这些文件的哪一部分给了你这样的印象。您的用例听起来像是一个经过虚拟化处理的应用程序

集合
组件似乎已经关闭

收藏
用于其他用途。也许可以澄清一下。基本上，
Collection
用于非线性数据（例如甘特图、Pinterest布局等）。它更灵活，但这是以性能为代价的。您的用例听起来非常适合
列表
：）

最新答案
您可以使用
List
和
AutoSizer
来完成此操作。您只需要使用可用宽度和项目高度计算行数。不太复杂。：）

以下是资料来源：

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')
)

const{AutoSizer，List}=ReactVirtualized
常数项计数=100
常数项大小=100
//呈现您的列表
ReactDOM.render(
{（{高度，宽度}）=>{
const itemsPerRow=数学地板（宽度/项目尺寸）；
const rowCount=Math.ceil（ITEMS\u COUNT/itemsPerRow）；
返回(
{
常量项=[]；
const convertedIndex=索引*项目箭头；
for（设i=convertedIndex；i
)
}}
,
document.getElementById（'示例'）
)

初步答复
以下是我或多或少要做的：

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
    })
  }
}

导出默认类示例扩展组件{
静态类型={
列表：PropTypes.instanceOf（Immutable.list）.isRequired
}
构造函数（道具、上下文）{
超级（道具、背景）
this.\u rowRenderer=this.\u rowRenderer.bind（this）
this.\u RowRenderAdapter=this.\u RowRenderAdapter.bind（this）
}
shouldComponentUpdate（下一步，下一步状态）{
return shallowCompare（this、nextrops、nextState）
}
渲染（）{
const{list}=this.props
返回(
{（{高度，宽度}）=>(
{（{getRowHeight}）=>(
)}
)}
)
}
_getDatum（索引）{
const{list}=this.props
返回列表.get（索引%list.size）
}
_行渲染器（{index，key，style}）{
常数数据=此。\获取数据（索引）
返回(
{datum.name/*或其他*/}
)
}
_RowRenderAdapter（{rowIndex，…rest}）{
把这个还给我({
索引：行索引，
休息
})
}
}
谢谢您的回答。我用一些ASCII技巧更新了我的问题，试图更好地解释我要做的事情。
rowCount={list.size}
让我觉得您的解决方案创建了一个每行只有一项的列表。我想做的是根据窗口的宽度，每行显示任意数量的项目。哦！我明白了。：）下面是我创建的一个Plunker，展示了如何做到这一点：我将更新我的初始答案。谢谢，这个示例非常棒！我发现这个例子中有一个错误，如果剩下的单元格少于
itemsPerRow
的话，它还是会画一整行。但这似乎是可以解决的。作为记录，我认为文档中每个固定宽度行只看到一个项目，这使得我认为它不适合这个用例。