使用带有分隔符的 Material-ui 自动完成功能

Question

有没有办法在material-ui自动完成选项之间添加分隔线？

我只找到了这个解决方法，但我认为这不是最好的方法：

const options = [
    {
      label: 'Opt 1',
      value: 'OPT1'
    },
    {
      label: 'Divider',
      value: 'DIV',
      isDivider: true
    },
    {
      label: 'Opt 2',
      value: 'OPT2'
    },
    {
      label: 'Opt 3',
      value: 'OPT3'
    }
  ];

...

  // used to remove the opacity of disabled items (in my case dividers)
  autocompleteOption: {
    '&[aria-disabled="true"]': {
      opacity: 1
    }
  }

...

<Autocomplete
    options={options}
    multiple
    getOptionLabel={(option) => option.label}
    getOptionSelected={(option, value) => isEqual(value, option)}
    classes={{
      option: classes.autocompleteOption
    }}
    getOptionDisabled={(option) => option.isDivider}
    renderOption={(option) => {
      if (option.isDivider) {
        return <Divider className={classes.divider} />;
      }

      return option.label;
     }}
     ...
 />

• 在我需要分隔符的地方添加了isDivider选项
• 添加了getOptionDisabled方法来禁用分隔符选项
• 添加了一些样式以消除禁用项目的不透明度（在我的例子中是分隔线）
• 添加了renderOption以基于isDivider属性渲染分隔线

你还有其他建议吗 ？

感谢您的时间 ：）

Answer 1

与其创建虚拟选项，不如标记后面应有分隔符的选项怎么样？

例如，假设您想在第三个和第四个选项之间添加分隔线。将第三个选项设置isDivider为true

options[2].isDivider = true

然后将其插入<Divider />到 renderOption 中，如下所示：

renderOption={(props, option: any) => (
  <>
    <Li {...props}>{option.title}</Li>
    {option.isDivider ? <Divider /> : null}
  </>
)}