在 React 中初始化 materializecss 組件

Question

我正在嘗試將 MaterializeCSS 中的 Carousel 圖像滑塊添加到一個簡單的 React 組件中，但我無法對其進行初始化！ 知道我應該在我的代碼中的哪里做這將非常有幫助

import React, { Component } from 'react';
import { M } from 'materialize-css/dist/js/materialize.min.js';

export default class Slider extends Component {
  componentDidMount() {
   var elem = document.querySelector('.carousel');
   var instance = M.Carousel.init(elem, { duration: 200 });
 }
render() {
 return (
  <div className="container center-align">
   <h1 className="header pink-text">Slider</h1>
    <div className="carousel">
      <a className="carousel-item" href="#one!">
        <img src="https://www.w3schools.com/images/picture.jpg" />
      </a>
      <a className="carousel-item" href="#two!">
        <img src="../../public/images/lana/1.jpg" />
      </a>
      <a className="carousel-item" href="#three!">
       <img src="../../public/images/lana/1.jpg" />
      </a>
      <a className="carousel-item" href="#four!">
       <img src="../../public/images/lana/1.jpg" />
      </a>
       <a className="carousel-item" href="#five!">
        <img src="../../public/images/lana/1.jpg" />
       </a>
     </div>
    </div>
  );
 }
}

這給了我一個錯誤：無法讀取未定義的屬性“Carousel”

我試着用 Jquery 來做，沒有錯誤，但沒有用！

Answer 1

我遇到過同樣的問題。

通過添加 materializecss npm 模塊解決了

npm install materialize-css

然后將其導入到組件中

import M from "materialize-css";

並在 componentDidUpdate 方法中，添加了 init

componentDidUpdate() {

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

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

問題解決了！！

Answer 2

看起來您正在使用.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!'); 
});

Answer 3

使用 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);
});

就我而言，我使用選項卡來初始化 Materialize 功能。

Answer 4

如果您想在您的應用程序中使用 min.js 文件，請嘗試使用標簽將其添加到 html 文件中。

或者嘗試使用 npm 包添加節點模塊。

希望這可以幫助。

Answer 5

我發現它需要一些時間來呈現內容。 當我使用setTimeout()函數並調用它工作的初始化 JS 行時。

Answer 6

我使用 setTimeout() 函數從主 html 頁面初始化 Carousel js 代碼，我使用了一個微調器來讓外觀看起來更好

它看起來像這樣

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

Answer 7

添加窗口.M。 ...

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

});