反应语义-UI: Dropdown.Menu / Problem
反应语义-UI: Dropdown.Menu / Problem
提问于 2021-01-25 05:42:55
我正在尝试构建一个显示语言标志符号的语言选择器下拉菜单-在菜单中，当它没有打开时，以及在打开的菜单中。我不想展示任何文本。
我使用内联样式在我的应用程序中设置我的组件的样式，因此我也想通过style={myStyle}定义菜单样式，否则打开的下拉菜单不会受到组件中的样式的影响。
<Dropdown
value={value}
selection
compact
style={myStyle}
onChange={getLanguage} // could be removed
options={countryOptions}
>
<Dropdown.Menu style={myStyle} >
{countryOptions.map( country => {
return (
<Dropdown.Item key={country.key} value={country.value} flag={country.flag} onClick={getLanguage} />
)
})}
</Dropdown.Menu>
</Dropdown>我使用上面的代码，它对我有效，唯一的问题是，我得到了错误消息，我不能在组件中同时使用和选项：
Warning: Failed prop type: Prop `selection` in `Dropdown` conflicts with props: `children`. They cannot be defined together, choose one or the other.我不使用这些选项的问题是，我不知道如何在组件中设置活动项。如果没有这些选项，就不可能在此组件中显示当前值。
我遗漏了什么或做错了什么？是否可以在不使用选项的情况下设置当前值？我可以忽略错误消息吗？
非常感谢你的帮助。
回答 1
Stack Overflow用户
发布于 2021-02-16 10:11:53
我认为您所要求的是在Dropdown.Item上设置活动属性，并测试项目值是否与下拉列表的设置值相匹配。
<Dropdown
value={value}
compact
style={myStyle}
selection
onChange={getLanguage} // could be removed
options={countryOptions}
>
<Dropdown.Menu style={myStyle} >
{countryOptions.map( country => {
return (
<Dropdown.Item
key={country.key}
value={country.value}
active={(value === country.value)}
flag={country.flag}
onClick={getLanguage}
/>)
})}
</Dropdown.Menu>
</Dropdown>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65876285
复制相关文章
相似问题
腾讯云开发者
