React项目导入Materialize CSS JS遇ReferenceError问题求助

早上好，我在React项目中集成Materialize CSS时遇到了JavaScript相关的问题，特别是在导入和使用其Modal组件时。我已经尝试了多种导入方式，但始终无法让Modal正常工作，还出现了错误。

当前实现代码 #

landingpage.js 中的导入与组件代码：

import React, { Component } from 'react'; 
import './styles/css/custom.css'; 
import $ from 'jquery'; 
import 'materialize-css'; // 仅导入JS资源
import '../node_modules/materialize-css/js/modal'; 

class LandingPage extends Component {
  componentDidMount() {
    $('.modal').modal();
  }

  render() {
    return (
      <div>
        <a className="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
        <div id="modal1" className="modal">
          <div className="modal-content">
            <h4>Modal Header</h4>
            <p>A bunch of text</p>
          </div>
          <div className="modal-footer">
            <a href="#!" className="modal-close waves-effect waves-green btn-flat">Agree</a>
          </div>
        </div>
      </div>
    );
  }
}

export default LandingPage;

遇到的问题 #

点击Modal按钮时没有弹出弹窗，反而抛出错误：

ReferenceError: Component is not defined

我已经折腾了两天，尝试了各种导入方式，查了很多资料，但还是没解决。这是我的期末项目的一部分，我正在自学React，希望能得到帮助。

问题分析与解决方案 #

这个错误和你导入Materialize JS的方式有关，还有几个React使用Materialize的细节需要注意，下面一步步来解决：

1. 修复导入方式，避免重复/错误导入

你现在同时导入了materialize-css和单独的modal.js，这会导致冲突。正确的做法是只导入一次完整的Materialize资源：

import React, { Component } from 'react';
// 先导入Materialize的CSS
import 'materialize-css/dist/css/materialize.min.css';
import './styles/css/custom.css';
import $ from 'jquery';
// 导入完整的Materialize JS
import M from 'materialize-css/dist/js/materialize.min.js';

2. 修复ReferenceError: Component is not defined错误

这个错误大概率是因为组件类的定义出现了遗漏或拼写错误。确保你的组件类正确继承自React.Component，就像上面修正后的代码那样——必须明确写出class LandingPage extends Component，不能省略这部分。

3. 正确初始化Materialize Modal

推荐使用Materialize提供的全局M对象来初始化组件，比直接用jQuery更可靠：

componentDidMount() {
  // 可以针对单个Modal初始化
  M.Modal.init(document.getElementById('modal1'));
  // 也可以批量初始化页面上所有Modal
  // M.Modal.init(document.querySelectorAll('.modal'));
}

4. 注意React JSX的语法规范

在React中，必须用className代替HTML的class属性，这是JSX的强制要求，虽然你可能已经注意到了，但再强调一次避免踩坑。

5. 确保依赖安装正确

先确认你已经安装了所有必需的依赖：

npm install materialize-css jquery

完整修正后的代码 #

import React, { Component } from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import './styles/css/custom.css';
import $ from 'jquery';
import M from 'materialize-css/dist/js/materialize.min.js';

class LandingPage extends Component {
  componentDidMount() {
    M.Modal.init(document.getElementById('modal1'));
  }

  render() {
    return (
      <div>
        <a className="waves-effect waves-light btn modal-trigger" href="#modal1">Open Modal</a>
        <div id="modal1" className="modal">
          <div className="modal-content">
            <h4>Modal Header</h4>
            <p>A bunch of text here for testing.</p>
          </div>
          <div className="modal-footer">
            <a href="#!" className="modal-close waves-effect waves-green btn-flat">Agree</a>
          </div>
        </div>
      </div>
    );
  }
}

export default LandingPage;

额外提示：函数式组件的写法 #

如果你后续改用React Hooks的函数式组件，可以在useEffect中完成初始化：

import React, { useEffect } from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import M from 'materialize-css/dist/js/materialize.min.js';

const LandingPage = () => {
  useEffect(() => {
    M.Modal.init(document.querySelectorAll('.modal'));
  }, []);

  return (
    {/* 相同的Modal JSX代码 */}
  );
};

export default LandingPage;

内容的提问来源于stack exchange，提问作者Sashiimi