如何在 React 中从物化中启用弹出菜单？

Posted 2023-02-16

【中文标题】如何在 React 中从物化中启用弹出菜单？

【英文标题】：How do I enable pop-up menus from materialise in React?

【发布时间】：2021-07-08 07:52:06

【问题描述】：

我有一个 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>

我希望这个东西在点击或悬停时打开并显示内容

materialize css website 描述如下代码

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

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

【问题讨论】：

这就是 jQuery init - 使用 javascript init（Materialize 不再依赖 jQuery） - 并将其放入每个组件渲染中。

【参考方案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>

【参考方案2】：

在第二个“li”项中添加一个 onclick 事件，传递事件对象，通过从事件对象中获取类名来调用 dropdown() 函数。

<li>
    <a className="dropdown-trigger" href="#!" onclick(e) => e.target.className.dropdown(); data-target="dropdown1">
       Dropdown<i className="material-icons right">arrow_drop_down</i>
    </a>
</li>

【讨论】：

是的，但想象一下必须为您的应用程序的每个下拉菜单执行此操作：/ 这将是一个真正的痛苦

【参考方案3】：

简单！只需将此代码添加到js文件中

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

您还没有初始化下拉菜单，这就是它不起作用的原因！不要使用这个框架，也许MDbootstrap 会是完美的，因为他们给你一个 React 版本并且他们有一个没有广告的漂亮文档！

【参考方案4】：

如你所说，你使用的是React，基于the link that you left on the question，$(".dropdown-trigger").dropdown();是jQuery方式，你需要找出React方式

你可以安装 materialize-css 包，我猜你会发现 How to use materialize-css with React? 对这个目的很有帮助

然后像这样导入和使用包：

import React,  useRef, useEffect  from 'react';
import M from 'materialize-css';

function DropDown() 
    const dropDownTriggerRef = useRef();
    
    useEffect(() => 
      M.Dropdown.init(dropDownTriggerRef.current);
    , [])

    return (
           // all of the other tags and other stuff
           ....
           <li>
              <a className="dropdown-trigger"
                 href="#!" data-target="dropdown1"
                 ref=dropDownTriggerRef
              >
                  Dropdown
                  <i className="material-icons right"> arrow_drop_down </i>
              </a>
           </li>
          ....
    );

【参考方案5】：

<!--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>