React中如何正确导入Materialize JS库并调用其方法？

嘿，我来帮你搞定这个问题！你遇到的情况其实是Materialize JS的模块化导入逻辑和React组件生命周期的小坑导致的，完全不用非得回到index.html里全局导入，咱们一步步来解决：

问题根源分析 #

你之前的两种导入方式没生效，主要有两个核心原因：

1. 导入方式不对：materialize-css/dist/js/materialize.min.js并没有对外暴露默认导出对象，所以你用import materializeJS from ...拿到的是undefined，传给组件的M自然没有任何方法。
2. 多余的DOM监听：React的componentDidMount钩子本身就是在DOM完全加载完成后才触发的，你在里面再加document.addEventListener('DOMContentLoaded', ...)，这个事件早已经在React渲染前触发过了，回调函数根本不会执行，导致你误以为M没有方法。

正确的解决方案 #

这里给你几个可行的方案，选哪个都能解决问题：

方案1：导入M并通过props传递 #

在项目入口文件（比如index.js）里正确导入Materialize的样式和JS，然后把M传递给App组件：

// index.js
import 'materialize-css/dist/css/materialize.min.css'; // 必须导入样式，不然组件会没有Materialize的视觉效果
import M from 'materialize-css';

ReactDOM.render(<App M={M} />, document.getElementById('root'));
registerServiceWorker();

然后在App.js里直接使用props里的M，去掉多余的DOM监听：

// App.js
componentDidMount() {
  const { M } = this.props;
  // 直接初始化select，不用等DOMContentLoaded
  const elems = document.querySelectorAll('select');
  M.FormSelect.init(elems);
}

方案2：在组件内直接导入M #

如果你不想通过props传递，也可以直接在App.js里导入Materialize：

// App.js
import 'materialize-css/dist/css/materialize.min.css';
import M from 'materialize-css';

class App extends React.Component {
  componentDidMount() {
    const elems = document.querySelectorAll('select');
    M.FormSelect.init(elems);
  }

  // 你的其他组件代码...
}

方案3：全局导入后使用window.M #

如果你坚持用import 'materialize-css/dist/js/materialize.min.js'这种全局导入方式，那可以直接通过window.M访问，同样要去掉多余的监听：

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

// App.js
componentDidMount() {
  const elems = document.querySelectorAll('select');
  window.M.FormSelect.init(elems);
}

总结 #

完全不需要在index.html里单独导入Materialize，只要用对模块化导入方式，配合React的生命周期钩子，就能正常使用它的所有功能啦。

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