带有 ReactJS 的 Material Design Lite(导入/需要问题) [英] Material Design Lite with ReactJS (import/require Issue)

问题描述

我正在尝试将 Google 的 Material Design Lite 与 ReactJS 结合使用.我正在使用 Spinner Loading &文本字段 MDL 库的组件.

但是，当我使用 React Router 切换路由时，动画不会发生 &当我刷新页面时，它工作正常.我想，这可能是因为 MDL 组件没有升级.然后，我尝试使用 componentHandler.upgradeDom()，但控制台抛出错误，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 样式 = {装载机:{marginTop: '70px',}}var Loading = React.createClass({渲染:函数(){返回 (<div className="mdl-spinner mdl-js-spinner is-active" style={styles.loader}></div>);},componentDidMount:函数(){componentHandler.upgradeDom();},});module.exports = 加载中；

我还尝试使用 console.log(MDLite) 在控制台中记录 MDLite 变量.但是，它向我展示了一个空对象{}.我正在使用 webpack &已经使用 NPM 安装了 Material Design Lite，npm install material-design-lite --save.

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

解决方案

我自己想出了解决方案.您可以通过两种方式实现这一目标.

<块引用>

懒惰的方式

在 node_modules/material-design-lite/material.js 中，编辑 &在最后添加以下代码，如下所述.

<块引用>

//你也可以只导出 componentHandlerif (typeof module === 'object') {module.exports = 窗口；}

您的 ma​​terial.js 文件将如下所示.

;(function() {...componentHandler.register({构造函数:MaterialRipple，classAsString: 'MaterialRipple',cssClass: 'mdl-js-ripple-effect',小部件:假});//你也可以只导出 componentHandlerif (typeof module === 'object') {module.exports = 窗口；}}());

在你的 React Component 文件中，require 像这样，

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

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

注意，如果只想导入componentHandler，也可以写module.exports = componentHandler;.

<块引用>

Webpack 方式

就我个人而言，我更喜欢 webpack 方式，因为它更干净&您无需自己编辑模块文件.

安装exports-loader，npm installexports-loader --save-dev.然后，在您的 webpack.config.js 中，将加载器指定为

加载器:[{测试:/\.js$/,排除:/node_modules/，loader: 'exports-loader!babel-loader'}]

在你的 React Component 文件中，你可以 require componentHandler as

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

希望能帮到你！

I am trying to use Google's Material Design Lite with ReactJS. I am using Spinner Loading & Text Field Component of MDL library.

But, when I switch routes with React Router, the animation does not take place & when I refresh the page, it works fine. I think, this is probably because MDL components are not getting upgraded. Then, I am trying to use componentHandler.upgradeDom(), but Console throws an error, app.js:27160 Uncaught TypeError: Cannot read property 'upgradeDom' of undefined.

Here is the code,

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;

I also tried to log MDLite variable in Console with console.log(MDLite). But, it is showing me an empty Object {}. I am using webpack & have installed Material Design Lite with NPM, npm install material-design-lite --save.

My question is how can I import/require MDL properly & use componentHandler.upgradeDom()?

解决方案

I figured out the solution myself. There are two ways through which you can achieve this.

The Lazy Way

In node_modules/material-design-lite/material.js, edit & add the following code in the end as mentioned below.

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

Your material.js file will look like this.

;(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;
  }

}());

In your React Component file, require like this,

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

Then, you can call componentHandler.upgradeDom() to upgrade MDL elements.

Note that you can also write module.exports = componentHandler; if you only want to import componentHandler.

The Webpack Way

Personally, I would prefer the webpack way as it is much cleaner & you need not to edit the module files yourself.

Install exports-loader, npm install exports-loader --save-dev. Then, in your webpack.config.js, specify loaders as

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

In your React Component file, you can require componentHandler as

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

I hope it helps!

这篇关于带有 ReactJS 的 Material Design Lite(导入/需要问题)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！