MDL 组件不适用于 React答案

【问题标题】：MDL Component Not working with ReactMDL 组件不适用于 React
【发布时间】：2016-06-18 16:35:51
【问题描述】：

我正在关注 Facebook 的 react 教程，并且正在玩弄它。当我尝试将 MDL 与我的页面（来自 getmdl.io）集成时，它不起作用。

在我的 index.html 中；我添加了指向他们的 css 和 js 文件的链接。我还使用 npm 安装了 mdl。

我的 index.html：

 <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Tutorial</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>

    <!--Material design things getMdl-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.2/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.1.2/material.min.js"></script>

  </head>
  <body>
  <div id="content"></div>
  <script type="text/javascript" src="client/public/bundle.js"></script>
  </body>
</html>

在我的 index.jsx 文件中，它正在被 webpack 转换为 bundle.js：

const LikeComponent = React.createClass({
      getInitialState : function (){
        return {likesCount2 : this.props.likesCount};
      },

      getLikesCount : function (){
        return {likesCount2};
      },
      onLike : function () {
        let newLikesCount = this.state.likesCount2 + 1;
        this.setState ({likesCount2 : newLikesCount});
      },
      componentDidUpdate: function(){
          componentHandler.upgradeDom();
      },
      render : function(){
        return (
          <div>
            Likes : <span>{this.state.likesCount2}</span>
            <div>
                {/*<RaisedButton label="Like" onClick={this.onLike}/>*/}
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onClick={this.onLike}>Like Me</button>

              </div>
          </div>
        );
      }
    });

我已经在渲染函数中添加了按钮。

输出应该有一个材料设计按钮，但按钮不会改变。

现在输出：Button is plain HTML button

有没有人可以帮忙。

【问题讨论】：

标签： javascript web reactjs material-design-lite material-ui

【解决方案1】：

在 React 中，您需要使用 className 而不是 class。原因是class是一个保留的JS字，JSX编译成JS。与for 属性相同 - 您必须使用htmlFor。

我必须承认，我每天都在继续犯这个错误。幸运的是，React 在浏览器控制台中通过警告报告了这个常见问题。

简而言之，将您的代码更改为：

<button className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onClick={this.onLike}>Like Me</button>

【讨论】：

工作就像一个魅力。 React 还是新手，所以犯了这些错误。谢谢。