React.js集成Materialize v1.0.0无法初始化JS功能求助

我之前也踩过这个坑！把Materialize CSS v1.0迁移到React项目时，JS组件初始化确实是个头疼的问题，尤其是侧边栏这类需要操作DOM的控件。结合我自己的解决经验，给你几个可行的方案：

1. 先确认Materialize JS的导入方式 #

首先要保证你已经通过npm安装了materialize-css，然后在项目中正确导入JS文件。最稳妥的方式是在全局入口文件（比如Index.js）中导入：

import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize.min.js';

这样整个项目都能访问到Materialize的JS方法，不用在每个组件里重复导入。

2. 利用React生命周期初始化组件 #

Materialize的JS组件需要在DOM渲染完成后才能初始化，所以必须在React的生命周期钩子中执行初始化代码：

如果你用的是函数组件（比如你的Landing.js）： #

使用useEffect钩子，传入空依赖数组确保只在组件挂载时执行一次：

import { useEffect } from 'react';

const Landing = () => {
  useEffect(() => {
    // 初始化侧边栏
    const sidenavElements = document.querySelectorAll('.sidenav');
    M.Sidenav.init(sidenavElements);

    // 其他需要初始化的组件也可以放在这里，比如下拉菜单
    const dropdownElements = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(dropdownElements);
  }, []); // 空数组确保仅执行一次

  return (
    <div>
      {/* 侧边栏DOM结构要符合Materialize的要求 */}
      <ul className="sidenav" id="mobile-nav">
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
      <nav>
        <div className="nav-wrapper">
          <a href="#" data-target="mobile-nav" className="sidenav-trigger">
            <i className="material-icons">menu</i>
          </a>
          {/* 桌面端导航 */}
          <ul className="right hide-on-med-and-down">
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </div>
      </nav>
    </div>
  );
};

export default Landing;

如果你用的是类组件： #

在componentDidMount钩子中执行初始化：

class Landing extends React.Component {
  componentDidMount() {
    const sidenavElements = document.querySelectorAll('.sidenav');
    M.Sidenav.init(sidenavElements);
  }

  render() {
    // 组件JSX结构...
  }
}

3. 解决锚点标签的控制台错误 #

你提到的锚点相关错误，大概率是因为Materialize的JS会监听原生<a>标签的点击事件，而React的客户端路由会和这个行为冲突。解决方法有两个：

方法一：使用React Router的Link组件替代原生<a> #

如果你的项目用了React Router，直接用Link组件来跳转，它会阻止默认的页面刷新行为：

import { Link } from 'react-router-dom';

// 把原生a标签换成Link
<Link to="/about">About</Link>

方法二：手动阻止锚点的默认行为 #

如果必须用原生<a>标签，在点击事件中阻止默认行为：

const handleAnchorClick = (e) => {
  e.preventDefault();
  // 手动触发React路由跳转
  props.history.push(e.target.getAttribute('href'));
};

<a href="/about" onClick={handleAnchorClick}>About</a>

4. 可选方案：使用封装好的React Materialize库 #

如果觉得手动初始化太繁琐，可以使用第三方封装的react-materialize库，它把Materialize的组件都转换成了React组件，不用再手动调用M.*方法：

1. 安装依赖：

npm install react-materialize materialize-css

2. 直接使用封装好的组件：

import { Navbar, Sidenav, Link } from 'react-materialize';

const Landing = () => {
  return (
    <Navbar>
      <Sidenav trigger={<a href="#"><i className="material-icons">menu</i></a>}>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </Sidenav>
    </Navbar>
  );
};

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