Materialize-css使用React，使用React Lifecycle方法初始化组件 [英] Materialize-css With React, Initializing components using React Lifecycle method

问题描述

我坚持初始化某些需要Javascript的ui组件，例如side-nav和carousel，
我试图使用React componentDIdMount()生命周期方法，并在实现文档的过程中使用Javascript

I am stuck on initializing certain ui components that need Javascript, e.g, side-nav and carousel,
I tried to use React componentDIdMount() lifecycle method, using Javascript as in materialize docs like so,

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被分配了一个值，但从未使用过.仍然无法正常使用导航功能.我真的不知道我在想什么.

But I am getting an Eslint error saying instances is assigned a value but never used. and still the side-nav isn't really working. I don't really know what am I missing.

这是我的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初始化side-nav，因此我只是想让它在这里工作. 首先十分感谢.

this is a link from materialize docs explaining how to initialize a side-nav using Javascript, so I am just trying to get that to work here. Thanks very much in advance.

致谢.

推荐答案

您需要执行npm install materialize-css@next.之后，您需要在您的组件JS文件中导入materialize-css.

You need to do npm install materialize-css@next. After this, you need to import the materialize-css in your component JS file.

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

To use the Javascript materialize-css components, a reference of these components has to be made in componentDidMount() and then it can be used in ref.

CodeSandbox-SideNav演示

CodeSandbox-轮播演示

您可以从此存储库中检查React中的其他Materialise CSS组件- GermaVinsmoke-Reactize

You can check other Materialize CSS components in React from this repository - 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">[e-mail]</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;

这篇关于Materialize-css使用React，使用React Lifecycle方法初始化组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！