Question

我试图将MaterialiseCSS中的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>
  );
 }
}

这给了我一个错误：无法阅读财产＆＃39; Carousel＆＃39;未定义的

我试着用Jquery做，没有错误，但没有工作！

Answer 1

您似乎正在使用.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 2

如果您想在应用程序中使用min.js文件，请尝试使用标记将其添加到html文件中。

或者尝试使用npm包添加节点模块。

希望这有帮助。

Answer 3

我发现渲染内容需要一些时间。当我使用setTimeout()函数并调用初始化JS行时，它可以工作。

Answer 4

我使用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 5

我有同样的问题。

通过添加materializecss npm模块来解决它

npm install materialize-css

，然后将其导入组件

import M from "materialize-css";

并在componentDidUpdate方法中，添加了init

componentDidUpdate() {

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

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

问题解决了！

Answer 6

使用带有 useEffect 的React Hook，您还可以在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 7

添加窗口。 ...

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

}）;

在React中初始化materializecss组件

7 个答案: