带ReactJS的Material Design Lite(导入/需要问题)

Question

我正在尝试使用Google的Material Design Lite和ReactJS.我正在使用MDL库的Spinner Loading和Text Field Component.

但是,当我使用React Router切换路由时,动画不会发生,当我刷新页面时,它工作正常.我想,这可能是因为MDL组件没有升级.然后,我正在尝试使用componentHandler.upgradeDom(),但是Console会抛出错误app.js:27160 Uncaught TypeError: Cannot read property 'upgradeDom' of undefined.

这是代码,

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;

我还尝试在Console中记录MDLite变量console.log(MDLite).但是,它向我展示了一个空的Object {}.我使用的WebPack及安装材料设计精简版与NPM,npm install material-design-lite --save.

我的问题是如何正确导入/要求MDL并使用componentHandler.upgradeDom()？

Answer 1

我自己想出了解决方案.有两种方法可以实现这一目标.

懒惰的方式

在node_modules/material-design-lite/material.js下面编辑并添加以下代码,如下所述.

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

您的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组件文件中,require像这样,

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

然后,您可以调用componentHandler.upgradeDom()升级MDL元素.

请注意,module.exports = componentHandler;如果您只想导入,也可以编写componentHandler.

Webpack方式

就个人而言,我更喜欢webpack方式,因为它更清洁,你不需要自己编辑模块文件.

安装exports-loader , npm install exports-loader --save-dev. 然后,在webpack.config.js中,将加载器指定为

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

在React Component文件中,您可以将requirecomponentHandler作为

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

我希望它有所帮助!