我目前正在尝试借助 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
to <Component/>
,但是由于我使用了框架,因此我不确定<Dropdown/>
单击该项目时期望我做什么,并且文档并没有真正的帮助。