问题描述
我正在尝试从名为 Admindek 的引导程序模板创建侧边导航组件。
但是当它出现在下拉菜单中时它不起作用。
Sample Dashboard with Side nav
这是我的代码：
SideNavComp.js：
require('../../config');
import React,{ useState,useEffect } from "react";
import ReactDOM from "react-dom";
function SideNavMain(props){
return (
<nav className="pcoded-navbar">
<div className="nav-list">
<div className="pcoded-inner-navbar main-menu">
<ul className="pcoded-item pcoded-left-item">
<li className="pcoded-hasmenu">
<a href="#!" className="waves-effect waves-dark">
<span className="pcoded-micon">
<i className="feather icon-pie-chart"></i>
</span>
<span className="pcoded-mtext">Charts</span>
</a>
<ul className="pcoded-submenu">
<li>
<a href="/" className="waves-effect waves-dark">
<span className="pcoded-mtext">Google Chart</span>
</a>
</li>
<li>
<a href="/" className="waves-effect waves-dark">
<span className="pcoded-mtext">ChartJs</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
);
}
ReactDOM.render(<SideNavMain/>,document.getElementById('side_nav'));
config.js:
// popper
window.Popper = require('popper.js');
// jquery
window.$ = window.jQuery = require('jquery/src/jquery');
// bootstrap
require('bootstrap');
基本 Html：
<!DOCTYPE html>
<html lang="en">
<Meta http-equiv="content-type" content="text/html;charset=UTF-8" />
{% load static %}
<head>
<title>AFD PORTAL | Dashboard</title>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimal-ui">
<Meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" href="{% static 'images/sra_logo_old.png' %}" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'admindek/css/bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'admindek/css/waves.min.css' %}" media="all">
<link rel="stylesheet" type="text/css" href="{% static 'admindek/css/themify-icons.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'admindek/css/font-awesome.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'admindek/css/feather.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'admindek/css/icofont.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'admindek/css/style.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'admindek/css/pages.css' %}">
</head>
<body>
<div id="fullpage_loader"></div>
<div id="toast"></div>
<div class="loader-bg">
<div class="loader-bar"></div>
</div>
<div id="pcoded" class="pcoded">
<div class="pcoded-overlay-Box"></div>
<div class="pcoded-container navbar-wrapper">
<nav class="navbar header-navbar pcoded-header">
<div class="navbar-wrapper">
<div class="navbar-logo">
<a href="{% url 'dashboard_home_page' %}" style="font-size:20px; font-weight:bold;">
AFD PORTAL
</a>
<a class="mobile-menu" id="mobile-collapse" href="#">
<i class="feather icon-menu icon-toggle-right"></i>
</a>
<a class="mobile-options waves-effect waves-light">
<i class="feather icon-more-horizontal"></i>
</a>
</div>
<div class="navbar-container container-fluid">
<ul class="nav-right">
<li class="user-profile header-notification">
<div class="dropdown-primary dropdown">
<div class="dropdown-toggle" data-toggle="dropdown">
<img src="{% static 'images/user_avatar.jpeg' %}" class="img-radius" alt="User-Profile-Image">
<span>{{ user.first_name }}</span>
<i class="feather icon-chevron-down"></i>
</div>
<ul class="show-notification profile-notification dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<li>
<a href="{% url 'dashboard_user_profile_page' %}">
<i class="feather icon-user"></i> Profile
</a>
</li>
<div id="logout"></div>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="pcoded-main-container">
<div class="pcoded-wrapper">
<div id="side_nav"></div>
{% block content %} {% endblock %}
</div>
</div>
</div>
</div>
<script type="text/javascript" src="{% static 'build/js/Authentication/logoutFormMainComp.js' %}"></script>
<script type="text/javascript" src="{% static 'build/js/Authentication/SideNavMainComp.js' %}"></script>
<script type="text/javascript" src="{% static 'build/js/Utils/FullPageLoaderComp.js' %}"></script>
<script type="text/javascript" src="{% static 'build/js/Utils/ToastNotificationComp.js' %}"></script>
<script type="text/javascript" src="{% static 'admindek/js/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admindek/js/jquery-ui.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admindek/js/popper.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admindek/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admindek/js/waves.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admindek/js/jquery.slimscroll.js' %}"></script>
<script type="text/javascript" src="{% static 'admindek/js/pcoded.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admindek/js/vertical-layout.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admindek/js/script.min.js' %}"></script>
</body>
</html>
我已经尝试在其中添加 jquery、popper.js 和 bootstrap.js，但仍然无法正常工作。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）