0

在生产模式下构建 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>

其他一些（可能）相关信息：

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

任何人都知道可能导致这种情况发生的原因？

4

1 回答 1

0

所以，这被证明是 Angular 的一个问题。在 angular.json 中禁用构建优化解决了这个问题。

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

构建优化器减小了编译包的大小，所以虽然这个解决方案有效，但它并非没有缺点。

于 2019-02-19T18:02:58.477 回答