Question

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

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

我遇到的问题是用单个组件初始化缩小的js但没有成功。下面是示例一个是css入口点的Index.js和我试图使用缩小的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>

此外，在使用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

1 个答案: