Reactjs React Bootstrap下拉菜单未关闭，而是水平渲染

所以我在使用react引导下拉菜单时发现了一个无法关闭的bug，它实际上在我的屏幕上水平显示了它的所有选项

我在Stackoverflow上搜索，几乎没有类似的帖子，但没有一篇是针对react的

        <DropdownButton
          title={this.state.selectedOption}
          id="document-type"
          onSelect={this.handleSelect.bind(this)}
        >
          {myoptions.map((opt, i) => (
            <Dropdown.Item key={i} eventKey={i}>
              {opt}
            </Dropdown.Item>
          ))}`enter code here`
        </DropdownButton>

{myoptions.map（（opt，i）=>(
{opt}
))}`在这里输入代码`

我期望正常行为符合

下拉列表是可切换的上下文覆盖，用于显示链接列表等。与覆盖一样，下拉列表使用第三方库Popper.js构建，该库提供动态定位和视口检测

您还需要添加

bootstrap.css

，或者在

index.html

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

<script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>

---

导入引导css好吗？问题是它以某种方式从父元素继承了一些css，并导致了问题。谢谢你的回复