MDL组件不与React一起使用

Question

MDL组件不与React一起使用

sho*_*it1 4 javascript web reactjs material-design-lite material-ui

我正在关注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>

Run Code Online (Sandbox Code Playgroud)

在我的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>
        );
      }
    });

Run Code Online (Sandbox Code Playgroud)

我在渲染功能中添加了按钮.

输出应该有一个材质设计按钮,但按钮不会改变.

现在输出:Button是纯HTML按钮

有谁可以提供帮助.

Answer 1

Ata*_*hev 7

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，3 月前
查看次数：	937 次
最近记录：	10 年，3 月前