使用 React.JS 和 Materialise v1.0.0 无法初始化 JS

Question

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

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

我遇到的问题是用单个组件初始化缩小的 js 但没有成功。这是一个示例，它是 css 入口点的 Index.js 和 sidebar 组件，我正在尝试使用缩小的 js 进行工作。我还提供了 App.js 配置，以防有人好奇。计划是将这个项目的每个部分分解成单独的组件，但首先只想获得初始化 sidebar 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 并且必须具有 class sidenav-trigger。此外，侧面导航必须具有 class 名称 sidenav。 side-nav 连字符无效：

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

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

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

使用更正标记的工作示例：

使用 React.JS 和 Materialise v1.0.0 无法初始化 JS

Using React.JS with Materialize v1.0.0 unable to init JS

javascript

css

node.js

materialize

reactjs