0

プロダクション モードで react-bootstrap をビルドした後、ドロップダウン メニューが正しく表示されないという問題が発生しています。

ここに画像の説明を入力

詳しく調べてみると、HTML が間違ったクラスでロードされているように見えます: <ul role="menu" class="super-colors -menu" aria-labelledby="dropdown-custom-1">. この場合、クラスは でありdropdown-menu、 ではありません-menu

props 要素を調べると、これは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>

その他の (おそらく) 関連情報:

  • react-bootstrap の上に構築された patternfly-react という UI ライブラリを使用していますが、問題は react-bootstrap にあるようです。
  • アプリは react-bootstrap 0.32.1 を使用します
  • これは、アプリが本番モードでビルドされている場合にのみ表示され、開発モードは正常に動作します。
  • Angular 6 アプリ内で React を実行するという、かなり型破りなセットアップがあります。

何がこれを引き起こしているのか、誰にも手がかりがありますか?

4

1 に答える 1