использование инициализации Materialize CSS в React's useEffect не работает так, как в componentDidMount - PullRequest
Новая
       55

использование инициализации Materialize CSS в React's useEffect не работает так, как в componentDidMount

0 голосов
/ 16 января 2020

с помощью componentDidMount () для инициализации материализации 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

1 Ответ

1 голос
/ 16 января 2020

вы должны знать, когда вы просто хотите использоватьEffect работает как componentDidMount, вы должны передать пустой массив в качестве второго параметра. как показано ниже 

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

. Таким образом, useEffect запускается только один раз. и обратите внимание: когда запускается componentDidMount, это означает, что все HTML уже находится в DOM. так что вам не нужен слушатель для полностью загруженных данных

...