无法使用 NextJS 实现 Materialize-CSS 初始化脚本

Question

我正在使用Materialize CSS来设计我正在处理的 Web 应用程序的样式。 我正在使用 NextJS 和 ReactJS 构建应用程序。 我已经使用 Materialize CSS 文件中定义的类设置了导航栏的样式。 但是，我无法按照 Materialize 网站上的说明使用规定的初始化脚本来实现响应式侧边栏功能。

我的导航栏组件 (./components/Navbar.js) 如下所示：

import React, { Component, Fragment } from 'react';
import Link from 'next/link';
import $ from 'jquery';

class Navbar extends Component {
  constructor(props) {
    super(props)
    this.props = props;
  }

  componentDidMount = () => {
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems, options);
    });
  }

  render() {
    return (

      <Fragment>
        <nav>
          <div className="nav-wrapper blue">
            <Link prefetch href='/'>
              <a href="/" className="brand-logo">Project Coco</a>
            </Link>
            <a href="#" data-target="slide-out" className="sidenav-trigger"><i className="material-icons">menu</i></a>
            <ul id="nav-mobile" className="right hide-on-med-and-down">
              <li>
                <Link prefetch href='/'>
                  <a>Home</a>
                </Link>
              </li>
              <li>
                <Link prefetch href='/about'>
                  <a>About</a>
                </Link>
              </li>
              <li>
              </li>
            </ul>
          </div>
        </nav>
        {/* Sidenav markup */}
        <ul className="sidenav" id="slide-out">
          <li>
            <Link prefetch href='/'>
              <a>Home</a>
            </Link>
          </li>
          <li>
            <Link prefetch href='/about'>
              <a>About</a>
            </Link>
          </li>
        </ul>
      </Fragment>
    );
  }
}

export default Navbar;

很明显，这个功能（边栏）需要 JQuery。 所以我已经通过yarn添加了它，并使用import $ from 'jquery'调用它。 但是在运行时，它会抛出一个错误，说sidenav is not a function 。

我什至尝试完全取消 JQuery，只使用componentDidMount初始化脚本的 vanilla JS 版本：

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });

但这一次，虽然没有错误，但该功能仍然拒绝工作，点击汉堡菜单不会触发 sidenav，它应该触发。

整个代码仓库都在Github上供参考，原型应用程序在schandillia.com 上运行。 任何解决方案？

PS：问题似乎是ComponentDidMount中的初始化代码在 MaterializeCSS.js （被称为外部文件）之前执行，它依赖于此。 任何解决此问题的方法都可能是一个潜在的解决方案，尽管这只是一个假设。

Answer 1

您需要将materialize-css导入到组件中。 可悲的是，如果你尝试import 'materialize-css'你会得到一个window is undefined错误。 这是因为Next.js是通用的，这意味着它首先在服务器端执行代码，其中window不存在 。 我用于此问题的解决方法如下：

如果你没有，请安装materialize-css：

$ npm i materialize-css

仅在定义window时才将 materialize-css导入到组件中：

if (typeof window !== 'undefined') {
    window.$ = $;
    window.jQuery = $;
    require('materialize-css');
}

然后，在componentDidMount方法中：

componentDidMount = () => {
    $('.sidenav').sidenav();
}

所以你的组件看起来像这样：

import React, { Component, Fragment } from 'react';
import Link from 'next/link';
import $ from 'jquery';

if (typeof window !== 'undefined') {
    window.$ = $;
    window.jQuery = $;
    require('materialize-css');
}

class Navbar extends Component {
    constructor(props) {
        super(props)
        this.props = props;
    }

    componentDidMount = () => {
        $('.sidenav').sidenav();
    }

    render() {
        return (
              <Fragment>
                <nav>
                    ...
                </nav>
                {/* Sidenav markup */}
                <ul className="sidenav" id="slide-out">
                    ...
                </ul>
              </Fragment>
        );
    }
}

export default Navbar;

来源： Next.js FAQ和这个问题 。

Answer 2

这个怎么样：-

• _app.tsx

import 'materialize-css/dist/css/materialize.min.css';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

• 索引.tsx

import React, { useEffect } from 'react';

const Index = () => {
  useEffect(() => {
    const M = require('materialize-css');
    M.toast({ html: 'worlds' });
  }, []);

  return (
    <div className='container'>
      <h1>hello</h1>
    </div>
  );
};

export default Index;