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

问题描述

我目前正在尝试借助 FluentUI/react-northstar Dropdown 组件制作下拉菜单。不幸的是，此组件的 items 道具在下拉列表中只有一个 string[] 用于呈现的名称，但我也需要一个 key。

我尝试通过使用 renderItem 添加自定义渲染器来实现此目的：

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

dropDownMapper 函数返回一个对象数组，如下所示：[{key: string,name: string},...]

有了这个，我可以在下拉菜单中呈现正确的项目，但我无法与它们交互。我已经尝试将 onClick 添加到 <Component/>，但由于我使用该框架，我不确定 <Dropdown/> 在单击项目时希望我做什么并且 {{3 }} 并不是很有帮助。

解决方法

我能够通过向项目添加属性“标题”和“内容”来使其工作：

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

下拉组件将：

• 使用标题和内容来呈现选择
• 使用标题呈现所选项目
• 将选定的对象传递给 on change 事件处理程序

Example on CodeSandbox