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下拉列, expected a single ReactElement.

Answer 1

下拉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

1 个答案: