在生产模式下构建时,react-bootstrap bsClass设置不正确

时间:2019-02-19 14:30:20

标签: react-bootstrap patternfly

我遇到一个问题,在生产模式下构建react-bootstrap后,下拉菜单显示不正确:

enter image description here

经仔细检查,似乎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>

其他一些(可能)相关信息:

  • 我们正在使用一个名为patternfly-react的UI库,该库建立在react-bootstrap之上,但是问题似乎出在react-bootstrap上。
  • 该应用使用react-bootstrap 0.32.1
  • 仅当该应用在生产模式下构建,开发模式可以正常工作时才会显示。
  • 我们有一个非常常规的设置,我们在Angular 6应用程序中运行React。

任何人都有线索可能导致这种情况发生吗?

1 个答案:

答案 0 :(得分:0)

因此,这原来是Angular的问题。在angular.json中禁用构建优化可解决此问题。

"production": {
  ...
  "vendorChunk": false,
  "buildOptimizer": false,

构建优化器减小了编译包的大小,因此尽管此解决方案有效,但并非没有缺点。