爲什麼物化不能使用reactjs

我創建了一個帶有materialize.css庫的靜態網頁，當時我試圖移動一些組件來作出反應，但它們不起作用。爲什麼物化不能使用reactjs

這是我的HTML樣板

<!DOCTYPE html> 
<html> 
    <head> 
    <!--Import materialize.css--> 
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> 
    <!--Let browser know website is optimized for mobile--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
    <script src="http://fb.me/react-with-addons-0.13.1.js"></script> 
    <script src="http://fb.me/JSXTransformer-0.13.1.js"></script> 
    </head> 
    <body> 
    <div id="button"></div> 
    <script type=text/jsx src="main.js"></script> 

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript" src="js/materialize.min.js"></script> 
    </body> 
</html>

，這是main.js

var ButtomTest = React.createClass({ 
    render: function() { 
    return (
     <div className="test"> 
     <a class="waves-effect waves-light btn">Stuff</a> 
     </div> 
    ); 
    } 
}); 
React.render(
    <ButtomTest />, 
    document.getElementById('button') 
);

在瀏覽器中我只看到「東西」的綠色。我究竟做錯了什麼？

來源

2015-04-15 Jose Osorio

檢查你的拼寫... – max

對不起，英語不是我的母語。 –

文檔暗示它需要JavaScript：http://materializecss.com/waves.html#！上班？是否有可能是因爲該按鈕直到加載'materialize.min.js'文件之後纔會呈現，它的行爲並不像預期的那樣？ – WiredPrairie

首先，確保在您的jsx代碼中使用className而不是class屬性。

其次，materialize.css使用wave.js來創建按鈕點擊的波浪效果，它與反應不太匹配。但您可以使用material-ui的紋波components達到相同的效果

來源

2015-04-16 10:22:56

我在哪裏添加ClassName？ –

感謝我找出， –

因此，react.js不能很好地處理物化項目？ – xzvkm

我實際上比materializecss.com更容易處理任何其他工具包。但是，我這樣做：

1）我做負載通過鏈接的CSS在主頁，只是因爲它更容易和似乎並不造成衝突與其他工具

2）到目前爲止，任何時候任何事情不起作用，因爲我輸入「class」而不是「className」（如你在你的例子中所做的那樣）

3）有時你必須調用Materialise javascript對象。例如：

Materialize.Toast("a popup says what?",4000);

幸運的是，因爲我是如何加載它，我只需要修改，要：

window.Materialize.Toast("a popup says what?",4000);

我的整個UI框架僅僅是materializecss.com + Mobx。
到目前爲止它的工作狀況非常好。

來源

2017-01-15 06:03:30

爲什麼物化不能使用reactjs

回答

相關問題