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

Question

我目前正在尝试在 FluentUI/react-northstar 下拉组件的帮助下创建一个下拉列表。不幸的是，此组件的 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函数returns像这样的对象数组：[{key: string, name: string}, ...]

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

Answer 1

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

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

下拉组件将：

使用 header 和内容来呈现选项
使用header渲染所选项目
将选定的 object 传递给 on change 事件处理程序

Example on CodeSandbox

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

Dropdown menu with item IDs in FluentUI/react-northstar

reactjs

typescript

drop-down-menu

fluent-ui

fluentui-react