如何在Fluent UI + React的Dropdown组件中添加自定义data属性

完全可以实现，根据你使用的Fluent UI版本不同，对应方案如下：

Fluent UI v8 版本 #

v8的Dropdown选项需要通过自定义渲染透传自定义属性：

• 首先在IDropdownOption的data字段中存入你要附加的自定义数据
• 通过onRenderOption方法自定义渲染选项节点，将data字段中的值映射为对应data-*属性挂载到DOM上

示例代码：

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

const dropdownOptions: IDropdownOption[] = [
  {
    key: '7',
    text: 'Data Quality',
    data: {
      passign: 'true',
      minpt: '3',
      maxpt: '6'
    }
  }
];

const customRenderOption = (option?: IDropdownOption) => {
  if (!option) return null;
  return (
    <div
      data-passign={option.data.passign}
      data-minpt={option.data.minpt}
      data-maxpt={option.data.maxpt}
    >
      {option.text}
    </div>
  )
}

// 组件调用
<Dropdown 
  options={dropdownOptions}
  onRenderOption={customRenderOption}
/>

Fluent UI v9 版本 #

v9的API做了简化，Option组件默认支持透传所有原生HTML属性，直接像写原生HTML一样附加data-*属性即可：

import { Dropdown, Option } from '@fluentui/react-components';

// 组件调用
<Dropdown>
  <Option
    value="7"
    data-passign="true"
    data-minpt="3"
    data-maxpt="6"
  >
    Data Quality
  </Option>
</Dropdown>

如果你需要给Dropdown组件的根DOM节点附加自定义data属性，不管是v8还是v9版本，都可以直接写在Dropdown标签上，属性会自动透传到根节点。

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