MDL 组件不适用于 React

Question

我一直在关注 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>
        );
      }
    });

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

输出应该有一个 material 设计按钮，但按钮没有改变。

现在输出：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

MDL Component Not working with React

javascript

web

reactjs

material-design-lite

material-ui