Bootstrap 切换（导航栏）在第一次加载 React 时不起作用答案

【问题标题】：Bootstrap toggle (navbar) is not working on first load ReactBootstrap 切换（导航栏）在第一次加载 React 时不起作用
【发布时间】：2019-02-01 18:11:02
【问题描述】：

我的引导导航栏有问题。它不适用于第一次加载。但是，如果我刷新页面，它工作得很好。我是 reactjs 新手，这是我第一次尝试创建项目。

场景是登录成功后，会跳转到dashboard页面。

请检查我下面的代码： HomePage.jsx

 render() { 
    ...
    <button className="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
      <span className="mdi mdi-menu"></span>
    </button>
   ...
    function mapStateToProps(state) {
        const { feeds, authentication } = state;
        const { user } = authentication;
        return {
            user,
            feeds
        };
    }

    const connectedHomePage = connect(mapStateToProps, null, null, {
        pure: false
    })(HomePage);
    export { connectedHomePage as HomePage };

你能帮我弄清楚这有什么问题吗？我已经在 index.html 中为画布外的东西设置了所需的 js 库。

<script src="../public/js/off-canvas.js"></script>
<script src="../public/js/popper.min.js"></script>

Index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>App</title>
        <!-- plugins:css -->

        <!-- inject:css -->
        <link rel="stylesheet" href="../public/css/style.css" />

        <!-- To fix issue in multiple path parameters -->
        <base href="/" />

        <!-- endinject:css -->
        <style>
            a { cursor: pointer; }
            .help-block { font-size: 12px; }
        </style>
        <!-- Add to home screen for Safari on iOS -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-title" content="Kingfisher Group Users App">
        <link rel="apple-touch-icon" href="../public/img/logo.png">

        <!-- Tile Icon for Windows -->
        <meta name="msapplication-TileImage" content="../public/img/logo.png">
        <meta name="msapplication-TileColor" content="#2F3BA2">
    </head>
    <body>
        <div id="app"></div>
        <!-- plugins:js -->
        <script src="../public/vendors/node_modules/jquery/dist/jquery.min.js"></script>
        <script src="../public/vendors/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="../public/vendors/node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>

        <!-- endinject -->
        <!-- inject:js -->
        <script src="../public/js/off-canvas.js"></script>
        <script src="../public/js/popper.min.js"></script>
        <script src="../public/js/hoverable-collapse.js"></script>
        <script src="../public/js/misc.js"></script>
        <!-- endinject -->
    </body>
    </html>

但是仍然缺少一些东西。请帮忙，因为我陷入了这个问题，无法继续前进。任何帮助是极大的赞赏。谢谢。

【问题讨论】：

我没有得到It is not working on first load.，你希望它是什么样子
@karthik 当然我想让它在第一次加载页面时工作。正如我所说，导航栏仅在页面刷新后才起作用。
分享你的 index.html
@Think-Twice done 请检查我的 index.html
您可以尝试将所有脚本移动到 body 关闭标记之后和 html 关闭标记之前，然后尝试。我过去也遇到过同样的问题，并且在 body close tag 对我有用后移动了我的脚本

标签： reactjs react-redux bootstrap-4

【解决方案1】：

如果我理解你的问题是正确的，一般来说你应该为不同的条件使用不同的组件 - 要么记录没有。

所以应该是这样的：

render() {
  if (this.props.user) {
    return (<ConponentForLoggedInState>)
  }
  return (<LoginPageComponent>)
}

【讨论】：

我认为这对我的问题没有帮助
那么togger应该怎么做呢？
它应该可以按预期工作。它应该显示链接。