MDL組件不能與React配合使用

我一直在關注Facebook的反應教程，並且正在玩弄它。當我嘗試將MDL與我的頁面（來自getmdl.io）集成時，它不起作用。MDL組件不能與React配合使用

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

是否有任何人誰可以提供幫助。

來源

2016-03-04 shobhit1

在反應中，您需要使用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>

來源

2016-03-05 20:14:55

工作就像一個魅力。 React仍然是新的，所以犯這些錯誤。謝謝。 – shobhit1

MDL組件不能與React配合使用

回答

相關問題