如何将Material UI Autocomplete与Virtua集成？求功能示例

下面是一个直接可用的集成示例，利用Virtua无需预设项高度的特性，简化MUI Autocomplete的虚拟化实现：

import React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { Virtualizer } from '@virtua/react';

// 生成1000条模拟选项数据
const options = Array.from({ length: 1000 }).map((_, index) => ({
  label: `选项 ${index + 1}`,
  value: index + 1,
}));

const VirtuaAutocomplete = () => {
  return (
    <Autocomplete
      options={options}
      renderInput={(params) => <TextField {...params} label="虚拟化选项" variant="outlined" />}
      // 用Virtua的Virtualizer替换默认列表容器
      ListboxComponent={({ children, ...props }) => (
        <Virtualizer
          style={{ maxHeight: 300, overflow: 'auto' }}
          itemCount={options.length}
          itemContent={(index) => children[index]}
          {...props}
        />
      )}
    />
  );
};

export default VirtuaAutocomplete;

关键说明 #

• 无需手动设置项高度：Virtua会自动计算并适配每个选项的实际高度
• 核心配置：通过itemCount传入总选项数，itemContent绑定对应索引的选项渲染节点
• 滚动容器：给Virtualizer设置maxHeight来限定下拉面板高度，触发虚拟化逻辑

内容的提问来源于stack exchange，提问作者ic3