在 React 的 useEffect 中使用 Materialize CSS 初始化不像在 componentDidMount 中那样工作

Question

使用 componentDidMount() 初始化 materialize js 工作正常，如文档中所示

componentDidMount() {
document.addEventListener("DOMContentLoaded", function() {
  var elems = document.querySelectorAll(".sidenav");
  M.Sidenav.init(elems, {});
});

}

但是每当我将我的组件转换为功能组件并且运行在 useEffect 中进行相同的初始化时它不起作用并且我的 sideNav 没有被初始化

整个代码

import React, { Fragment, useEffect } from "react";
import M from "materialize-css/dist/js/materialize.min.js";

export const Navbar = () => {
  useEffect(() => {
    document.addEventListener("DOMContentLoaded", function() {
      var sidenav = document.querySelectorAll(".sidenav");
      M.Sidenav.init(sidenav, {});
    });
  }, []);

  return (
    <Fragment>
      <div className="navbar-fixed">
        <nav className="teal darken-3">
          <div className="nav-wrapper mx-4">
            <a href="#!" className="brand-logo">
              <i className="far fa-id-badge" />
              EMS
            </a>
            <a href="#!" className="sidenav-trigger" data-target="mobile-nav">
              <i className="material-icons">menu</i>
            </a>
            <ul className="right hide-on-med-and-down">
              <li>
                <a href="profiles.html">Settings</a>
              </li>
              <li>
                <a href="register.html">Register</a>
              </li>
              <li>
                <a href="login.html">Login</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>

      <ul className="sidenav blue-grey darken-4" id="mobile-nav">
        <h3 className="teal-text ml-2">EMS</h3>
        <li>
          <div className="divider blue-grey darken-2"></div>
        </li>
        <li>
          <a href="profiles.html" className="white-text">
            Settings
          </a>
        </li>
        <li>
          <a href="register.html" className="white-text">
            Register
          </a>
        </li>
        <li>
          <a href="login.html" className="white-text">
            Login
          </a>
        </li>
      </ul>
    </Fragment>
  );
};

我认为问题出在 document.addEventListner

Answer 1

你应该知道什么时候你只想像 componentDidMount 一样使用 useEffect 你应该传递空数组作为第二个参数。如下图

useEffect(() => {
    var sidenav = document.querySelectorAll(".sidenav");
    M.Sidenav.init(sidenav, {});
  }, []);

这样useEffect只运行一次。并注意：当 componentDidMount 触发时，这意味着所有 HTML 已经在 DOM 中。所以你不需要任何监听器来接收完全加载的数据。

请注意，react 中的效果只是效果，不要将它们视为生命周期。

在 React 的 useEffect 中使用 Materialize CSS 初始化不像在 componentDidMount 中那样工作

using Materialize CSS initializations within React's useEffect doesn't work like it does in componentDidMount

materialize

reactjs

react-hooks

use-effect