Materialize-css с React, инициализация компонентов с использованием метода жизненного цикла React

Question

Я застрял при инициализации некоторых компонентов пользовательского интерфейса, для которых требуется Javascript, например, side-nav и carousel,
Я попытался использовать метод жизненного цикла React componentDIdMount(), используя Javascript, как при материализации документов, например:

import React, { Component } from 'react';
import MenuIcon from '@material-ui/icons/Menu';
import M from 'materialize-css/dist/js/materialize.min.js';
import 'materialize-css/dist/css/materialize.min.css';

class Navbar extends Component {
  componentDidMount() {
    document.addEventListener('DOMContentLoaded', () => {
      const elems = document.querySelectorAll('.side-nav');
      const instances = M.Sidenav.init(elems);
    });
  }

  render() {
    return (
      <React.Fragment>
        <div className="navbar-fixed">
          <nav className="teal">
            <div className="container">
              <div className="nav-wrapper">
                <a href="#home" className="brand-logo white-text">Travellizers</a>
                <a href="#!" data-target="mobile-nav" className="button-collapse hide-on-md-and-up">
                  <MenuIcon />
                </a>
                <ul className="right hide-on-med-and-down">
                  <li><a href="#home">Home</a></li>
                  <li><a href="#search">Search</a></li>
                  <li><a href="#popular">Popular places</a></li>
                  <li><a href="#about">about</a></li>
                </ul>
              </div>
            </div>
          </nav>
          <ul className="side-nav" id="mobile-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#search">Search</a></li>
            <li><a href="#popular">Popular places</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#contact">contact</a></li>
          </ul>
        </div>
      </React.Fragment>
    );
  }
}

export default Navbar;

Но я получаю сообщение об ошибке Eslint о том, что instances присвоено значение, но оно никогда не используется.и все же боковая навигация на самом деле не работает.Я действительно не знаю, что мне не хватает.

вот мой eslintrc.js файл

module.exports = {
    "extends": "airbnb",
    "rules": {
        "react/jsx-filename-extension": [1, 
            { "extensions": [".js", ".jsx"] }
        ],
        "arrow-body-style": 0,
        "linebreak-style": 0,
        "no-tabs": 0,
      },
      "env": {
        "browser": true,
    },
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
      ],
};

это ссылка из материализованных документов, объясняющая, как инициализировать навигацию по боковой панели с помощью Javascript, поэтому я просто пытаюсь заставить это работать здесь,Большое спасибо заранее.

С уважением.

Answer 1

Вам нужно сделать npm install materialize-css@next.После этого вам нужно импортировать materialize-css в ваш файл JS компонента.

Для использования компонентов Javascript materialize-css ссылка на эти компоненты должна быть сделана в componentDidMount(), а затем она может быть использована в ref.

CodeSandbox -Демонстрация SideNav

CodeSandbox - демонстрация карусели

Вы можете проверить другие компоненты Materialise CSS в React из этого репозитория - GermaVinsmoke - Reactize

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import image1 from "../public/parallax2.jpg";
import image2 from "../public/architecture-bridge-city-161853.jpg";

class Sidenav extends Component {
  componentDidMount() {
    const options = {
      inDuration: 250,
      outDuration: 200,
      draggable: true
    };

    M.Sidenav.init(this.Sidenav);

    let instance = M.Sidenav.getInstance(this.Sidenav);
    instance.open();
    console.log(instance.isOpen);
  }
  render() {
    return (
      <>
        <ul
          ref={Sidenav => {
            this.Sidenav = Sidenav;
          }}
          id="slide-out"
          className="sidenav"
        >
          <li>
            <div className="user-view">
              <div className="background">
                <img src={image2} />
              </div>
              <a href="#user">
                <img className="circle" src={image1} />
              </a>
              <a href="#name">
                <span className="white-text name">John Doe</span>
              </a>
              <a href="#email">
                <span className="white-text email">jdandturk@gmail.com</span>
              </a>
            </div>
          </li>
          <li>
            <a href="#!">
              <i className="material-icons">cloud</i>First Link With Icon
            </a>
          </li>
          <li>
            <a href="#!">Second Link</a>
          </li>
          <li>
            <div className="divider" />
          </li>
          <li>
            <a className="subheader">Subheader</a>
          </li>
          <li>
            <a className="waves-effect" href="#!">
              Third Link With Waves
            </a>
          </li>
        </ul>
        <a href="#!" data-target="slide-out" className="sidenav-trigger">
          <i className="material-icons">menu</i>
        </a>
      </>
    );
  }
}

export default Sidenav;