封装Material UI Base useAutocomplete时，如何用getOptionLabel显示自定义选项？

核心思路很简单：你只需要在组件内部直接调用传入的getOptionLabel函数来获取每个选项的显示文本，而不是硬编码取固定属性。下面是具体实现步骤和代码示例：

1. 定义可复用的自定义自动完成组件 #

组件需要接收options和getOptionLabel作为核心props，同时可以传递useAutocomplete所需的其他参数（比如onChange、value等）：

import { useAutocomplete } from '@mui/base/useAutocomplete';
import { styled } from '@mui/system';

const StyledInput = styled('input')`
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
`;

const StyledOption = styled('li')`
  padding: 8px;
  cursor: pointer;
  &:hover {
    background-color: #f0f0f0;
  }
`;

const StyledListbox = styled('ul')`
  list-style: none;
  padding: 0;
  margin: 4px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
`;

export default function CustomAutocomplete({
  options,
  getOptionLabel,
  onChange,
  value,
  ...props
}) {
  const {
    getInputProps,
    getListboxProps,
    getOptionProps,
    groupedOptions,
  } = useAutocomplete({
    options,
    getOptionLabel, // 传给useAutocomplete处理匹配、过滤逻辑
    onChange,
    value,
    ...props,
  });

  return (
    <div>
      <StyledInput {...getInputProps()} />
      {groupedOptions.length > 0 && (
        <StyledListbox {...getListboxProps()}>
          {groupedOptions.map((option) => (
            <StyledOption {...getOptionProps({ option })}>
              {/* 关键：调用getOptionLabel获取显示文本 */}
              {getOptionLabel(option)}
            </StyledOption>
          ))}
        </StyledListbox>
      )}
    </div>
  );
}

2. 父组件中使用该组件 #

传入自定义结构的options和对应的getOptionLabel函数即可：

import CustomAutocomplete from './CustomAutocomplete';

function ParentComponent() {
  const customOptions = [
    { foo: "a label" },
    { foo: "another label" },
    { foo: "third label" },
  ];

  return (
    <CustomAutocomplete
      options={customOptions}
      getOptionLabel={(option) => option.foo}
      onChange={(event, newValue) => {
        console.log('选中的值：', newValue);
      }}
    />
  );
}

关键点说明 #

• useAutocomplete接收getOptionLabel后，会用它来做选项的匹配、过滤（比如用户输入时自动筛选符合条件的选项），但不会自动帮你渲染显示文本，所以需要在StyledOption中手动调用该函数。
• 这种方式完全支持任意结构的options，只要调用者传入对应的getOptionLabel函数提取显示文本即可，组件本身不需要关心选项的具体结构。

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