プロダクション モードで 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 を実行するという、かなり型破りなセットアップがあります。
何がこれを引き起こしているのか、誰にも手がかりがありますか?