Reactjs 引导程序4未完全呈现

我已经搜索了引导4登录导航栏模板，我遇到了。我已经转换了，代码如下：

import React, {Component} from 'react';

class HeaderComponent extends Component {
    render() {
        return (
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
                <div className="container">
                    <a className="navbar-brand" href="/">Reddit</a>
                    <button className="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
                        &#9776;
                    </button>
                    <div className="collapse navbar-collapse" id="exCollapsingNavbar">
                        <ul className="nav navbar-nav">
                            <li className="nav-item"><a href="/" className="nav-link">Home</a></li>
                            <li className="nav-item"><a href="/" className="nav-link">Popular</a></li>
                            <li className="nav-item"><a href="/" className="nav-link">All</a></li>
                        </ul>
                        <ul className="nav navbar-nav flex-row justify-content-between ml-auto">
                            <li className="nav-item order-2 order-md-1"><a href="/" className="nav-link" title="settings"><i className="fa fa-cog fa-fw fa-lg"></i></a></li>
                            <li className="dropdown order-1">
                                <button type="button" id="dropdownMenu1" data-toggle="dropdown" className="btn btn-outline-secondary dropdown-toggle">Login <span className="caret"></span></button>
                                <ul className="dropdown-menu dropdown-menu-right mt-2">
                                <li className="px-3 py-2">
                                    <form className="form">
                                            <div className="form-group">
                                                <input id="emailInput" placeholder="Email" className="form-control form-control-sm" type="text" required="" />
                                            </div>
                                            <div className="form-group">
                                                <input id="passwordInput" placeholder="Password" className="form-control form-control-sm" type="text" required="" />
                                            </div>
                                            <div className="form-group">
                                                <button type="submit" className="btn btn-primary btn-block">Login</button>
                                            </div>
                                            <div className="form-group text-center">
                                                <small><a href="/" data-toggle="modal" data-target="#modalPassword">Forgot password?</a></small>
                                            </div>
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        )
    }
}

export default HeaderComponent;

import React，{Component}来自'React'；
类HeaderComponent扩展组件{
render（）{
返回(
☰








登录


登录




)
}
}
导出默认HeaderComponent；

---

这里的问题是没有呈现登录选项的下拉列表。当我最小化窗口时，所有选项都被隐藏，但按下按钮不会打开菜单。

我认为可能您有更高的z索引，因为您的代码目前在中间工作：

HTML:

我已经导入了所有引导脚本（可能会有帮助）

---

代码是组件渲染的复制和粘贴。

我在

index.js

中以这种方式导入引导：

import'bootstrap/dist/css/bootstrap.min.css'现在我应该在哪里写这些语句。我应该把它们写在
index.html
文件中吗？（添加
index.html
没有帮助）。此外，我没有手动更改任何z索引值，所以我在哪里查找它们？您可以从源链接下载引导文件，也可以将链接和脚本粘贴到index.html中（从这里：）。使用浏览器查看网络请求，并确保这些链接没有问题。因此，我已将链接和脚本复制到
index.html
中，并在django运行的
localhost:8000
中正常工作，但在
localhost:3000
中则没有。为什么？@SreekarMouli我不知道为什么：）确保您使用的是正确的index.html，并确保每个项目都有其链接和脚本（如您所见，存在完整性检查，请尝试从网站复制，并以新的完整性粘贴到react项目脚本和链接中）。确保网络请求中未阻止请求！
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>