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

Question

我目前正在尝试在 FluentUI/react-northstar Dropdown 组件的帮助下制作一个下拉菜单。不幸的是，items这个组件的 prop 在下拉列表中只有一个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}, ...]

这样我就可以在下拉菜单中呈现正确的项目，但我无法与它们交互。我尝试添加onClickto <Component/>，但由于我使用该框架，我不确定<Dropdown/>单击该项目时期望我做什么，并且文档并没有真正的帮助。

Answer 1

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

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

下拉组件将：

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

CodeSandbox 上的示例