非TypeScript项目中无法导入IDropdownOption的问题咨询

问题解答 #

不需要使用TypeScript也能正常使用Fluent UI的Dropdown组件，你遇到的报错原因是误将TypeScript专属的类型定义当成了运行时代码导入。

所有IDropdownOption、IDropdownStyles这类前缀带I的导出都是TypeScript的接口类型，仅用于TS项目的静态类型校验，不会被编译到实际运行的JS产物中，所以纯JS项目导入这些类型自然会提示导出不存在。

你可以按照以下步骤调整代码正常使用组件：

1. 调整导入语句，只保留实际运行时需要导出的内容即可，删除所有带I前缀的类型导入：

import { Dropdown, DropdownMenuItemType } from '@fluentui/react/lib/Dropdown';

2. 配置Dropdown选项时不需要引入对应的类型定义，直接按照规范构造选项对象即可使用，参考示例：

const options = [
  { key: 'a', text: '选项A' },
  { key: 'b', text: '选项B' },
  { key: 'divider', text: '-', itemType: DropdownMenuItemType.Divider },
  { key: 'c', text: '选项C', disabled: true }
];

function MyDropdown() {
  return <Dropdown placeholder="选择内容" options={options} />
}

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