使用带有 Materialize v1.0.0 的 React.JS 无法初始化 JS

Question

一直在尝试使用 npm 将我们的几个使用 materialize-css v1.0 的项目转换为 react.js 并且有大量时间这样做。我想知道是否还有其他人也尝试过解决这个问题，也许想出了一些解决方案？

我可以很好地使用 css 部分，使用 npm 模块并在 Index.js 中引用它。

我遇到的问题是使用单个组件初始化缩小的 js，但没有成功。这是一个示例，它是用于 css 入口点的 Index.js 和我正在尝试使用缩小的 js 工作的 sidebar 组件。我还提供了 App.js 配置以防有人好奇。计划是将这个项目的每个部分分解为单独的组件，但首先只是想在这样做之前获得初始化 sidebar js 的功能。

索引.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;

登陆.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>

此外，在使用 react 时，您应该始终使用 refs 而不是自己查询 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>

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

带有更正标记的工作示例：