Javascript 带有ReactJS的材料设计Lite（导入/要求发布）

我正在尝试使用ReactJS。我正在使用MDL库的&Component

但是，当我使用React Router切换路由时，动画不会发生&当我刷新页面时，它工作正常。我认为，这可能是因为MDL组件没有得到升级。然后，我尝试使用

componentHandler.upgradeDom（）

，但控制台抛出一个错误，

app.js:27160 Uncaught TypeError:无法读取未定义的
的属性“upgradeDom”

这是密码

var React = require('react');
var ReactDOM = require('react-dom');
var PropTypes = React.PropTypes;
var MDLite = require('material-design-lite');
var componentHandler = MDLite.componentHandler;

var styles = {
  loader: {
    marginTop: '70px',
  }
}

var Loading = React.createClass({
  render: function() {
    return (
      <div className="mdl-spinner mdl-js-spinner is-active" style={styles.loader}></div>
    );
  },
  componentDidMount: function() {
    componentHandler.upgradeDom();
  },
});

module.exports = Loading;

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var PropTypes=React.PropTypes；
var MDLite=要求（“材料设计-lite”）；
var componentHandler=MDLite.componentHandler；
变量样式={
加载器：{
marginTop:'70px'，
}
}
var加载=React.createClass({
render:function（）{
返回(
);
},
componentDidMount:function（）{
componentHandler.upgradeDom（）；
},
});
module.exports=加载；

我还尝试使用
Console.log（MDLite）
在控制台中记录MDLite变量。但是，它向我显示了一个空对象{}。我正在使用webpack&已使用NPM安装了Material Design Lite，
NPM安装Material Design Lite--保存

我的问题是如何正确导入/要求MDL并使用
componentHandler.upgradeDom（）
？
我自己找到了解决方案。有两种方法可以实现这一点

懒惰的方式

在
节点\u modules/material design lite/material.js
中，编辑并添加以下代码，如下所述

您的material.js文件如下所示

;(function() {
  .
  .
  .
  componentHandler.register({
    constructor: MaterialRipple,
    classAsString: 'MaterialRipple',
    cssClass: 'mdl-js-ripple-effect',
    widget: false
  });

  // You can also export just componentHandler
  if (typeof module === 'object') {
    module.exports = window;
  }

}());

在React组件文件中，
要求如下所示

var MDLite = require('material-design-lite/material');
var componentHandler = MDLite.componentHandler;

然后，您可以调用
componentHandler.upgradeDom（）
来升级MDL元素

注意，您还可以编写
module.exports=componentHandler如果您只想导入
组件处理程序

网页包装方式

就个人而言，我更喜欢网页包的方式，因为它更干净&你不需要自己编辑模块文件

安装导出加载程序，
npm安装导出加载程序--保存开发文件
。然后，在webpack.config.js中，将加载程序指定为

loaders: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'exports-loader!babel-loader'
  }
]

在React组件文件中，您可以
require
componentHandler作为

var componentHandler = require('exports?componentHandler!material-design-lite/material');

我希望有帮助
 您的解决方案工作正常，但我们需要升级DOM，您认为这会影响性能吗？
var componentHandler = require('exports?componentHandler!material-design-lite/material');