如何在MUI Autocomplete中嵌入MUI X Tree View？

完全可以实现这个需求，直接用renderOptions无效是因为Autocomplete默认的renderOptions是为扁平选项设计的，而Tree View是层级结构，需要调整实现思路，通过手动控制下拉弹窗内容来完成集成。

核心实现思路 #

1. 禁用Autocomplete默认的列表容器，避免和Tree View的DOM结构冲突
2. 用renderOptions直接渲染Tree View组件
3. 手动同步Tree View节点的选中状态到Autocomplete的value
4. 自主控制下拉弹窗的显示/隐藏逻辑

完整代码示例 #

import React, { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import TreeView from '@mui/x-tree-view/TreeView';
import TreeItem from '@mui/x-tree-view/TreeItem';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';

const TreeAutocomplete = () => {
  const [selectedValue, setSelectedValue] = useState(null);
  const [open, setOpen] = useState(false);

  // 模拟层级树形数据
  const treeData = [
    {
      id: '1',
      label: '父节点1',
      children: [
        { id: '1-1', label: '子节点1-1' },
        { id: '1-2', label: '子节点1-2' },
      ],
    },
    {
      id: '2',
      label: '父节点2',
      children: [
        { id: '2-1', label: '子节点2-1' },
        { id: '2-2', label: '子节点2-2' },
      ],
    },
  ];

  // 处理树形节点选中事件，同步到Autocomplete
  const handleTreeSelect = (event, nodeId) => {
    const findNode = (nodes, targetId) => {
      for (const node of nodes) {
        if (node.id === targetId) return node;
        if (node.children) {
          const found = findNode(node.children, targetId);
          if (found) return found;
        }
      }
      return null;
    };
    const selectedNode = findNode(treeData, nodeId);
    if (selectedNode) {
      setSelectedValue(selectedNode);
      // 可选：选中节点后自动关闭下拉框
      setOpen(false);
    }
  };

  return (
    <Autocomplete
      value={selectedValue}
      onChange={(event, newValue) => setSelectedValue(newValue)}
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      disableListWrap // 禁用默认列表容器，避免DOM结构冲突
      renderInput={(params) => (
        <TextField
          {...params}
          label="选择树形节点"
          variant="outlined"
        />
      )}
      renderOptions={() => (
        <TreeView
          sx={{ maxHeight: 300, overflowY: 'auto', padding: 1 }}
          defaultCollapseIcon={<ExpandMoreIcon />}
          defaultExpandIcon={<ChevronRightIcon />}
          selected={selectedValue?.id}
          onNodeSelect={handleTreeSelect}
        >
          {/* 递归渲染所有层级节点 */}
          {treeData.map((node) => (
            <TreeItem key={node.id} nodeId={node.id} label={node.label}>
              {node.children?.map((child) => (
                <TreeItem key={child.id} nodeId={child.id} label={child.label} />
              ))}
            </TreeItem>
          ))}
        </TreeView>
      )}
    />
  );
};

export default TreeAutocomplete;

关键细节说明 #

• disableListWrap：必须开启这个属性，否则Autocomplete会生成默认的ul容器，导致Tree View的样式和交互异常
• 树形数据递归查找：通过递归函数匹配选中节点的ID，获取完整的节点数据同步到Autocomplete
• 弹窗状态控制：手动维护open状态，可以根据需求调整弹窗的显示逻辑（比如点击外部关闭、选中节点后关闭等）

扩展优化建议 #

• 如果需要搜索过滤：可以实现递归过滤逻辑，筛选出包含关键词的节点及其父节点，动态更新Tree View的渲染数据
• 支持多选：将selectedValue改为数组类型，在handleTreeSelect中添加/移除选中节点
• 样式自定义：通过sx属性调整Tree View的最大高度、内边距等，适配不同的界面需求

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