Material UI Autocomplete如何渲染无标签带图标的选项？

先梳理你代码里的核心问题，逐个修正就能解决报错并实现需求：

1. 变量名冲突 + 参数逻辑错误 #

你的renderOption函数参数用了options，和外部的数组变量重名，而且这个渲染函数应该接收单个选项值（而非整个数组），得把参数名改成option。

2. 图标资源引用错误 #

{searchIcon.svg}这种写法不符合React资源引入规范，你需要先通过import引入图标文件：

// 路径根据你的实际文件位置调整
import searchIcon from './searchIcon.svg';

之后在img的src属性里直接使用引入的searchIcon变量。

3. 无额外标签的实现 #

用React的空片段<></>代替<Fragment>，这样不会生成多余的DOM标签，完全满足你要的"无标签"需求。

修正后的完整代码 #

import searchIcon from './searchIcon.svg';

// 类组件写法，函数组件直接定义成普通函数即可
renderOption = (option) => {
  return (
    <>
      <img 
        src={searchIcon} 
        alt="搜索图标" 
        style={{ marginRight: '8px', width: '16px', height: '16px' }} 
      />
      {option}
    </>
  );
};

如果用第三方图标组件（比如Material UI的SearchIcon），可以直接替换img标签，写法更简洁：

import SearchIcon from '@mui/icons-material/Search';

renderOption = (option) => {
  return (
    <>
      <SearchIcon style={{ marginRight: '8px' }} />
      {option}
    </>
  );
};

最后把这个渲染函数传给对应组件的属性（比如React Select的renderOption），就能渲染出每个带图标的选项，且没有额外的包裹标签。

内容的提问来源于stack exchange，提问作者L.Li