Инициализировать компонент materializecss в React

Похоже, вы используете файл .min для импорта M из. Вместо этого вы должны установить MaterializeCSS как узел узла. Вы получаете сообщение об ошибке, потому что M ни как не определяется. Из этого файла .min нет экспорта.

Если вы хотите дождаться загрузки скрипта, лучше сделать это с помощью обратного вызова вместо setTimeout.

function loadScript(url, callback) {
  var script = document.createElement("script")
  script.type = "text/javascript";
  if (callback) { 
    script.onload = callback; 
  }
  document.body.appendChild(script)
  script.src = url;
}


loadScript(pathtoscript, function() {
  alert('script ready!'); 
});

Если вы хотите использовать файл min.js в своем приложении, попробуйте добавить его в файл html с помощью тега.

В качестве альтернативы попробуйте добавить модули узлов с помощью пакета npm.

Надеюсь это поможет.

Я понял, что для рендеринга контента требуется некоторое время. Когда я использую функцию setTimeout() и вызываю эти строки инициализации JS, она работает.

Я инициализирую js-код Carousel с главной html-страницы с помощью функции setTimeout (), я использовал счетчик, чтобы он выглядел немного лучше

это выглядит так

<script>

    setTimeout(() => {
      var elem = document.querySelector('.carousel');
      var instance = M.Carousel.init(elem, {});
      if (document.querySelector('.photos').classList) {
        document.querySelector('.photos').classList.remove("spinner")
      }
    }, 2000)
  </script>

Я была такая же проблема.

Решил, добавив модуль npm materializecss

npm install materialize-css

а затем импортировать его в компонент

import M from "materialize-css";

и в методе componentDidUpdate добавлен init

componentDidUpdate() {

    let collapsible = document.querySelectorAll(".collapsible");

    M.Collapsible.init(collapsible, {});
  }

Задача решена!!

Используя React Hook с useEffect, вы также можете инициализировать каждую функцию в Materialize, например:

    import React, { useEffect, Fragment } from "react";

    import M from "materialize-css/dist/js/materialize.min.js";

useEffect(() => {
    // Init Tabs Materialize JS
    let tabs = document.querySelectorAll(".tabs");
    M.Tabs.init(tabs);
});

В моем случае я использовал вкладки для инициализации функции материализации.

добавить окно М. ...

  useEffect(() => {
var elem = document.querySelector(".carousel");
var instance = window.M.Carousel.init(elem, {
  fullWidth: true,
  indicators: true,
});

});