在下拉组件中添加图像和 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 propchildrensupplied toDropdown, expected a single ReactElement.

Answer 1

Dropdown supports 一个 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>

在下拉组件中添加图像和 div

Add image and div inside of dropdown component

css

drop-down-menu

reactjs

semantic-ui