Использование React.JS с Materialise v1.0.0 не может инициализировать JS

Question

Мы пытались конвертировать несколько наших проектов, используя materialize-css v1.0, используя npm, в activ.js и тратят на это массу времени. Мне было интересно, пытался ли кто-нибудь еще заняться этим и, может быть, придумал какие-нибудь решения?

Я могу нормально использовать часть css, используя модуль npm и ссылаясь на него в Index.js.

Проблема, с которой я столкнулся, заключается в инициализации минимизированных js с отдельными компонентами, но безуспешно. Вот пример, являющийся Index.js для точки входа css и компонентом sidebar , который я пытаюсь получить, используя минимизированный js. Я также предоставил конфигурацию App.js на случай, если кому-то будет интересно. План состоял в том, чтобы разбить каждую часть этого проекта на отдельные компоненты, но сначала просто хотел получить функциональность инициализации боковой панели js , прежде чем делать это.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'materialize-css/dist/css/materialize.min.css';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
// import Header from './header/Header';
// import Footer from './Footer';
import Landing from './landing/Landing';
import About from './About';
import Projects from './Projects';
class App extends Component {
 render() {
 return (
 <div>
 <BrowserRouter>
 <div>
 {/*<Header />*/}
 <Route exact path="/" component={Landing} />
 <Route exact path="/about" component={About} />
 <Route exact path="/projects" component={Projects} />
 {/*<Footer /> */}
 </div>
 </BrowserRouter>
 </div>
 );
 }
}
export default App;

Landing.js

import React, { Component } from 'react';
import M from 'materialize-css/dist/js/materialize.min.js';
// import { Link } from 'react-router-dom';
import './Landing.css';

class Landing extends Component {
  componentDidMount() {
    console.log(M);
    const sideNav = document.querySelector('.button-collapse');
    console.log(M.Sidenav.init(sideNav, {}));

    M.Sidenav.init(sideNav, {});
  }

  render() {
    return (
      <div className="main-header">
        <div className="primary-overlay">
          <div className="navbar-fixed">
            <nav className="transparent">
              <div className="container">
                <div className="nav-wrapper">
                  <a href="#home" className="brand-logo">
                    TEST
                  </a>
                  <a data-activates="side-nav" className="button-collapse">
                    <i className="material-icons">menu</i>
                  </a>

                  <ul className="right hide-on-med-and-down">
                    <li>
                      <a href="#home">Home</a>
                    </li>
                    <li>
                      <a href="#about">About</a>
                    </li>
                    <li>
                      <a href="#testimonials">Testimonials</a>
                    </li>
                    <li>
                      <a href="#contact">Contact</a>
                    </li>
                    <li>
                      <a className="btn blue">Download</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
          </div>

          {/* Side Nav: fixed navbars must go right underneath main nav bar */}
          <ul id="side-nav" className="side-nav">
            <h4 className="blue-grey darken-4 center">TEST</h4>
            <li>
              <a className="divider" />
            </li>
            <li>
              <a href="#home">Home</a>
            </li>
            <li>
              <a href="#about">About</a>
            </li>
            <li>
              <a href="#testimonials">Testimonials</a>
            </li>
            <li>
              <a href="#contact">Contact</a>
            </li>
          </ul>

          {/*-- Showcase */}
          <div className="showcase container">
            <div className="row">
              <div className="col s12 main-text">
                <h5>You found the...</h5>
                <h1>Right Place To Start</h1>
                <p className="flow-text">
                  To take your business to the next level with our services that
                  have taken companies to the fortune 500
                </p>
                <a href="#about" className="btn btn-large white black-text">
                  Learn More
                </a>
                <a href="#contact" className="white-text">
                  <i className="material-icons medium scroll-icon">
                    arrow_drop_down_circle
                  </i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Landing;

Вот некоторые снимки экрана, которые я получаю с ошибками в своей консоли, а также в отношении тегов привязки (не знаю, как мне обойти это, если это необходимо в боковой панели). Я получаю доступ к боковой панели в соответствии с console.logs, показанными ниже.

Надеюсь, что кто-то уже сталкивался с этой проблемой и может помочь ...

Ура!

[! [Введите описание изображения здесь] [3]] [3]

Answer 1

Неверная разметка триггерной кнопки.Он должен быть data-target и иметь класс sidenav-trigger.Также боковая навигация должна иметь имя класса sidenav.side-nav с дефисом не будет работать:

<a href="#" data-target="side-nav" className="sidenav-trigger button-collapse">
    <i className="material-icons">menu</i>
</a>

Также вы всегда должны использовать ссылки вместо того, чтобы запрашивать DOM самостоятельно при работе с реагировать.Примените обратный вызов ref к элементу sidenav, а затем используйте его для инициализации:

class Landing extends Component {
    onRef = nav => {
        this.nav = nav;
        M.Sidenav.init(nav);
    };

    render() {
        return (
           {/* ... */}

            <ul ref={this.onRef} id="side-nav" className="sidenav">
                <li><a className="divider" /></li>

                {/* ... */}
            </ul>

            {/* ... */}
        );
    }
}

Рабочий пример с исправленной разметкой :