Materialize-css With React, 使用 React Lifecycle 方法初始化组件

Question

我一直在初始化某些需要 Javascript 的 ui 组件，例如侧导航和轮播，
我尝试使用 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"
      ],
};

这是来自 materialize 文档的link，解释了如何使用 Javascript 初始化侧导航，所以我只是想让它在这里工作。 首先十分感谢。

问候。

Answer 1

你需要做npm install materialize-css@next。在此之后，您需要在您的组件 JS 文件中导入 materialize-css。

要使用Javascript materialize-css组件，必须在componentDidMount()中引用这些组件，然后才能在ref中使用。

CodeSandbox - SideNav Demo

CodeSandbox - Carousel Demo

您可以从此存储库中检查 React 中的其他 Materialize CSS 组件 - 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;