Warum ist materialisieren funktioniert nicht mit reactjs

Habe ich eine statische web-Seite mit einstellen.css-Bibliothek, wenn ich versuchte, Sie zu bewegen, einige Komponenten zu reagieren, aber Sie funktionieren nicht.

Dies ist mein html-boilerplate

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

- und dies ist 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')
);

Im browser sehe ich nur "Zeug" in grüner Farbe. Was mache ich falsch?

  • Überprüfen Sie Ihre Rechtschreibung...
  • Sorry, Englisch ist nicht meine Muttersprache .
  • Die docs implizieren, dass es JavaScript benötigt: materializecss.com/waves.html#! arbeiten??? Ist es möglich, dass, weil der button nicht dargestellt wird, bis nach der materialize.min.js - Datei geladen wird, dass es sich nicht so verhält wie erwartet?
  • Ich denke nicht so, weil die Js laden inline-wenn ich mich nicht Irre, ist diese Zeile in jsx wird das gleiche in html aber ich werde es versuchen und hier kommentieren. Dank
  • Wenn die Welle code nicht Anhängen an das DOM-element, oder es manipuliert Sie unerwartet, es ist. Ist es wahrscheinlich, um zu arbeiten. Nicht jede Bibliothek ist kompatibel mit Reagieren.
InformationsquelleAutor Jose Osorio | 2015-04-15
  1. 2

    Stellen Sie zuerst sicher, dass Sie mit className statt class - Attribut in das jsx-code.

    Zweiten materialisieren.css verwendet wave.js erstellen eine Welle Effekt auf den button klickt und es passt nicht sehr gut mit reagieren. Aber Sie können material-ui`s Ripple Komponenten den gleichen Effekt erzielen,

    • Wo muss ich hinzufügen ClassName ?
    • Danke ich herausfinden, innen - <a ClassName>
    • So, react.js funktioniert nicht gut mit materialisieren Projekt ?
    • Es funktioniert okay, aber Sie haben zu verwenden componentDidMount auslösen, unabhängig von Bindungen an die JS, die materialisieren-css verwendet... es gibt anscheinend einige Projekte zu liefern materialisieren-css wie reagieren die Komponenten mit entsprechenden Bindungen im Ort.
    InformationsquelleAutor Olim Saidov
  2. 2

    Habe ich tatsächlich hatte eine einfachere Zeit mit materializecss.com als die anderen tool-kits. Allerdings, so mache ich das:

    1) ich mache laden die css per link auf der Hauptseite, nur weil es einfacher ist und scheint nicht zu Konflikten mit anderen tools

    2) So weit, jederzeit alles, was nicht funktioniert, ist es, weil ich tippte "Klasse" statt "className" (wie in deinem Beispiel)

    3) Manchmal müssen Sie zum Aufruf des Materialisieren javascript-Objekt. Zum Beispiel:

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

    Zum Glück, weil, wie lade ich es ich habe nur noch zu ergänzen, dass:

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

    Mein ganzes UI-framework ist einfach materializecss.com + Mobx.

    Es funktioniert ziemlich gut so weit.

    InformationsquelleAutor Jason Henriksen
Schreibe einen Kommentar