Question

我的引导导航栏有问题。它在第一次加载时不起作用。但是，如果我刷新页面，它就可以正常工作。我是reactjs的新手，这是我第一次创建项目。

该方案在成功登录后，将重定向到仪表板页面。

请在下面检查我的代码： 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>

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

Answer 1

如果我正确理解了您的问题，则通常应针对不同情况使用不同的组件-记录为否。

因此应该是这样的：

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

Bootstrap切换（navbar）在首次加载时不起作用React

1 个答案: