reactjs - 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}, ...]有了这个，我可以在下拉菜单中呈现正确的项目，但我无法与它们交互。我试过添加 onClick至 <Component/> ，但由于我使用框架，我不确定 <Dropdown/> 是什么期望我在单击该项目时执行 documentation不是真的有帮助。

Answer 1

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

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

下拉组件将:

使用标题和内容来呈现选择

使用标题呈现所选项目

将选定的对象传递给 on change 事件处理程序

Example on CodeSandbox