Выпадающее меню с идентификаторами элементов в FluentUI/react-northstar

Question

В настоящее время я пытаюсь создать раскрывающийся список с помощью компонента раскрывающегося списка FluentUI / response-northstar. К сожалению, 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/>ожидает, что я сделаю это, когда элемент был нажат, а документация не очень полезна.

Answer 1

Мне удалось заставить его работать, добавив к элементам свойства «header» и «content»:

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

Компонент "Раскрывающийся список":

• использовать заголовок и контент для отображения вариантов выбора
• использовать заголовок для рендеринга выбранного элемента
• передать выбранный объект в обработчик события при изменении

Пример на CodeSandbox