Добавить изображение и div внутри выпадающего компонента

Question

Я пытаюсь настроить компонент выпадающего профиля с помощью Semantic и React, но я столкнулся с несколькими проблемами. 1. Когда я пытаюсь поместить div внутри Dropdown.Menu мое приложение падает с ошибкой ниже. 2. Как добавить пользовательскую ширину в фактическое раскрывающееся меню? Прямо сейчас, когда я наводил курсор на раскрывающийся список, он работает, но я хочу, чтобы можно было навести курсор на изображение или выпадающий компонент, чтобы отобразилось фактическое раскрывающееся меню. Я пытаюсь получить этот файл puu.sh/tM6Ly/690a02bd46.png, но с изображением сбоку, если возможно, замените стрелку вниз на изображение.

<Dropdown simple={true} text="dropdown"> 
<Dropdown.Menu> 
    <Dropdown.Item>Profile 1</Dropdown.Item> 
    <Dropdown.Item>Profile 2</Dropdown.Item> 
    <Dropdown.Item>Profile 3</Dropdown.Item> 
    <Dropdown.Item>Profile 4</Dropdown.Item> 
</Dropdown.Menu> 
<div> 
    <img src="linkhidden"/> 
</div> 
</Dropdown> 

бросает ошибку onlyChild must be passed a children with exactly one child. и Invalid prop детей supplied to DropDown , expected a single ReactElement.

Answer 1

supports Dropdown icon опоры, которые могут быть использованы для замены значка по умолчанию стрелка, как вы описываете ваше намерение в комментариях. Просто передайте свою замену там.

<Dropdown simple={true} text="dropdown" icon={someNodeOrObject}> 
<Dropdown.Menu> 
    <Dropdown.Item>Profile 1</Dropdown.Item> 
    <Dropdown.Item>Profile 2</Dropdown.Item> 
    <Dropdown.Item>Profile 3</Dropdown.Item> 
    <Dropdown.Item>Profile 4</Dropdown.Item> 
</Dropdown.Menu> 
</Dropdown>