Javascript 在React中初始化ECSS组件

我正在尝试将Carousel图像滑块从MaterializeCSS添加到一个简单的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>
  );
 }
}

import React，{Component}来自'React'；
从“MaterializeCSS/dist/js/materialize.min.js”导入{M}；
导出默认类滑块扩展组件{
componentDidMount（）{
var elem=document.querySelector（'.carousel'）；
var instance=M.Carousel.init（elem，{duration:200}）；
}
render（）{
返回(
滑块
);
}
}

这给了我一个错误： 无法读取未定义的属性“Carousel”

---

我试着用Jquery来做，没有错误，但没有成功

看起来您正在使用一个

.min

文件从中导入

M

。您应该将

materialiecss

安装为节点模块。您得到一个错误，因为

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

文件从导入

M

。您应该将

materialiecss

安装为节点模块。您得到一个错误，因为

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包添加节点模块

---

希望这有帮助。

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

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

---

希望这有帮助。

我发现渲染内容需要一些时间。当我使用

setTimeout（）

函数并调用初始化JS行时，它工作了。

我发现渲染内容需要一些时间。当我使用setTimeout（）函数并调用初始化JS行时，它起作用了。

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

设置超时（（）=>{
var elem=document.querySelector（'.carousel'）；
var instance=M.Carousel.init（elem，{}）；
if（document.querySelector（'.photos'）.classList）{
document.querySelector（'.photos'）.classList.remove（“微调器”）
}
}, 2000)

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

设置超时（（）=>{
var elem=document.querySelector（'.carousel'）；
var instance=M.Carousel.init（elem，{}）；
if（document.querySelector（'.photos'）.classList）{
document.querySelector（'.photos'）.classList.remove（“微调器”）
}
}, 2000)

我也有同样的问题

通过添加ECSS npm模块解决了这个问题

npm install materialize-css

然后将其导入组件

import M from "materialize-css";

在componentDidUpdate方法中，添加了init

componentDidUpdate() {

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

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

问题解决了

我也有同样的问题

通过添加ECSS npm模块解决了这个问题

npm install materialize-css

然后将其导入组件

import M from "materialize-css";

在componentDidUpdate方法中，添加了init

componentDidUpdate() {

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

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

---

问题解决了

将React Hook与useffect一起使用，您还可以在Materialize上初始化每个功能，例如：

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

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

---

在我的例子中，我使用选项卡初始化Materialize功能。

使用React Hook withuseEffect也可以在Materialize上初始化每个功能，例如：

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

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

在我的例子中，我使用了选项卡来初始化物化特性。

添加window.M

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

}))

添加window.M

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

---

}))

谢谢你的回答，我试图在HTML中添加CDN并在那里初始化它，但是没有成功！你试过这些吗？是的，我试过。我用普通html做了类似的项目想法，效果很好，idk，我应该在ReactCheckout这个链接中初始化Materialize组件-，对于carousel，您可能需要从'react-Materialize'导入类似的-import{carousel}谢谢，非常感谢您的回答，我试图在HTML中添加CDN并在那里初始化它，但没有成功！你试过这些吗？是的，我试过。我用普通html做了类似的项目想法，效果很好，idk，我应该在ReactCheckout这个链接中初始化Materialize组件-，对于carousel，您可能需要从'react-Materialize'导入类似的-import{carousel}谢谢，非常感谢您的回答，所以不管我的代码是什么，我如何在应用程序中实现MaterializeCSS JS？不要使用

setTimeout

，你应该等到脚本加载完毕后再执行回调。谢谢你，Jakub，你说得对。我需要将它转换为回调，我需要从同一个目录中获取图像并将其传递给旋转木马，idk确切地说如何做！如果答案对你有帮助，你能把它标记为正确吗？是的，如果你愿意，你也可以帮我解决我的具体情况：）谢谢你的回答，所以不管我的代码是什么，我如何在应用程序中实现MaterializeCSS JS？不要使用

setTimeout

，你应该等到脚本加载完毕后再执行回调。谢谢你，Jakub，你说得对。我需要将它转换为回调，我需要从同一个目录中获取图像并将其传递给旋转木马，idk确切地说如何做！如果答案有帮助，你能把它标记为正确吗？我做了，如果你愿意，你也可以帮我解决我的具体情况：）你能提供代码吗