Reactjs FluentUI/react northstar中带有项目ID的下拉菜单

我目前正试图在FluentUI/react northstar下拉组件的帮助下制作一个下拉列表。不幸的是，这个组件的

项

属性在下拉列表中只有一个

字符串[]

用于呈现名称，但我还需要一个

键

我试图通过使用

renderItem

添加自定义渲染器来实现这一点：

<Dropdown
    renderItem = (Component: React.ElementType, props: any): React.ReactNode => {
      ...
      return <Component key={props.key} content={props.name} />;
    };
    items={dropDownMapper(displayTree[0], 0)}
    ...
/>

{
...
返回；
};
items={dropDownMapper（displayTree[0]，0）}
...
/>

dropDownMapper

函数返回如下对象数组：

[{key:string，name:string}，…]

---

有了它，我可以在下拉菜单中呈现正确的项目，但我无法与它们交互。我尝试过在

中添加

，但由于我使用了该框架，因此我不确定

在单击项目时希望我做什么，并且没有真正的帮助。

我能够通过向项目中添加属性“header”和“content”使其正常工作：

[{key: string, name: string, header: string, content: string}, ...]

下拉组件将：

• 使用标题和内容呈现选项
• 使用标题渲染选定项
• 将所选对象传递给更改事件处理程序