4

我目前正在尝试借助 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}, ...]

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

4

1 回答 1

3

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

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

Dropdown 组件将：

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

CodeSandbox 上的示例

于 2021-02-10T02:53:15.130 回答