我遇到一个问题,在生产模式下构建react-bootstrap后,下拉菜单显示不正确:
经仔细检查,似乎HTML加载了错误的类:<ul role="menu" class="super-colors -menu" aria-labelledby="dropdown-custom-1">
。在这种情况下,该类应为dropdown-menu
,而不是-menu
。
当我检查道具元素时,似乎是由于bsClass
设置不正确引起的:
{
"className": "super-colors",
"bsRole": "menu",
"pullRight": false,
"bsClass": "-menu",
"open": false,
"labelledBy": "dropdown-custom-1",
"onClose": "[function bound ]",
"onSelect": "[function ]",
"rootCloseEvent": "mousedown"
}
作为参考,这是上面显示的元素的代码:
<ButtonToolbar>
<Dropdown
id="dropdown-custom-1"
onToggle={() => console.log('hi')}
rootCloseEvent="mousedown"
>
<Dropdown.Toggle>Pow! Zoom!</Dropdown.Toggle>
<Dropdown.Menu className="super-colors">
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3" active>
Active Item
</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4">Separated link</MenuItem>
</Dropdown.Menu>
</Dropdown>
</ButtonToolbar>
其他一些(可能)相关信息:
任何人都有线索可能导致这种情况发生吗?
答案 0 :(得分:0)
因此,这原来是Angular的问题。在angular.json中禁用构建优化可解决此问题。
"production": {
...
"vendorChunk": false,
"buildOptimizer": false,
构建优化器减小了编译包的大小,因此尽管此解决方案有效,但并非没有缺点。