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

Posted 2023-02-22

【中文标题】使用带有 Materialize v1.0.0 的 React.JS 无法初始化 JS

【英文标题】：Using React.JS with Materialize v1.0.0 unable to init JS

【发布时间】：2018-10-28 00:29:18

【问题描述】：

一直在尝试使用 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]

【问题讨论】：

到底发生了什么你不想发生的事情？控制台中关于锚点的消息是来自 eslint 的警告。这是因为您至少有一个没有任何内容的锚点（在 Landing.js 中查看带有 className=divider 的锚点）

【参考方案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>

            /* ... */
        );
    

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

【讨论】：

感谢您的反馈和回答。您能否更新您的代码沙箱以显示您的工作答案？

只是看了示例，看起来你可能忘记了一些东西，因为它仍然没有显示固定的标记。 onRef 是否可能进入构造函数或它自己的方法？

@Blahblah 已修复。侧导航的类名必须是sidenav 而不是side-nav。你真的必须坚持文档。确保您在文档中选择了正确的版本。 side-nav 是版本 0.100.xx 中的正确类。

感谢@trixn 标记为正确！感谢您指出使用 refs 以及将文档标记与 v1.0 匹配

@Blahblah 那是因为链接元素没有设置href 属性。我更新了代码框和我的答案。只有具有该设置的链接才会应用 cursor: pointer 样式。