Инициализировать компонент materializecss в React - PullRequest
Новая
       18

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

0 голосов
/ 30 апреля 2018

Я пытаюсь добавить слайдер изображений 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>
  );
 }
}

это дает мне ошибку: Невозможно прочитать свойство 'Карусель' из неопределенного

Я пытался сделать это с Jquery, без ошибок, но не сработало!

Ответы [ 6 ]

0 голосов
/ 09 июля 2019

Используя 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);
});

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

0 голосов
/ 09 мая 2019

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

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

npm install materialize-css

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

import M from "materialize-css";

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

componentDidUpdate() {

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

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

Проблема решена !!

0 голосов
/ 20 мая 2018

Я инициализирую js-код карусели с главной 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>
0 голосов
/ 30 апреля 2018

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

0 голосов
/ 30 апреля 2018

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

Или попробуйте добавить модули узлов, используя пакет npm.

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

0 голосов
/ 30 апреля 2018

Похоже, вы используете .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!'); 
});
...