1

いくつかのコンポーネントを移動して反応させようとしたときに、materialize.css ライブラリを使用して静的 Web ページを作成しましたが、それらは機能しません。

これは私の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')
);

ブラウザでは、「スタッフ」が緑色でしか表示されません。私は何を間違っていますか？

4

2 に答える 2

2

まず、jsx コードでclassName代わりに属性を使用していることを確認してください。class

第 2 に、materialize.css はwave.jsを使用してボタンのクリック時に波の効果を作成しますが、react にはあまり適していません。ただし、material-uiの Rippleコンポーネントを使用して同じ効果を得ることができます

于 2015-04-16T10:22:56.833 に答える