Question

我正在关注Facebook的反应教程并正在玩它。当我尝试将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

是否有人可以提供帮助。

Answer 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>

MDL组件无法使用React

1 个答案: