css - 如何从 React 中的实体化启用弹出菜单？

Question

我有一个 React 应用程序，我正在尝试在那里添加一个像这样的 NavBar

<ul id="dropdown1" className="dropdown-content">
          <li><NavLink to="/create">Create lessons</NavLink></li>*/}
                <li><NavLink to="/lessons">Lessons</NavLink></li>
                <li><NavLink to="/quizes">Quizes</NavLink></li>
                <li><NavLink to="/quizcreator">Create QuizGame</NavLink></li>
                <li></li>
                <li></li>
        </ul>

  <nav>
    <div className="nav-wrapper">
      <a href="#!" className="brand-logo">Logo</a>
      <ul className="right hide-on-med-and-down">
        <li><NavLink to="/home">Home</NavLink></li>
        <li><a className="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i
            className="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="/" onClick={logoutHandler}>Logout</a></li>
      </ul>
    </div>
  </nav>

我希望这个东西在点击或悬停时打开并显示内容
物化css website描述如下代码

$(".dropdown-trigger").dropdown();

但我不知道在哪里插入它？在 MERN 堆栈上的应用

Answer 1

根据official doc您应该能够启用所有下拉菜单，如下所示:

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.dropdown-trigger');
  var instances = M.Dropdown.init(elems);
});

这是一个示例(请以整页打开):

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.dropdown-trigger');
  var instances = M.Dropdown.init(elems);
});

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>