1

当我尝试移动一些组件以做出反应但它们不起作用时，我使用 materialize.css 库创建了一个静态网页。

这是我的 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

其次，materialize.css 使用wave.js来创建按钮点击的波浪效果，它不太适合 react。但是可以使用material-ui的Ripple组件达到同样的效果

于 2015-04-16T10:22:56.833 回答
2

实际上，我使用 materializecss.com 比使用其他任何工具包都更轻松。但是，我这样做：

1）我确实通过主页上的链接加载css，只是因为它更容易并且似乎不会与其他工具造成冲突

2）到目前为止，任何时候都不起作用，这是因为我输入了“class”而不是“className”（就像你在你的例子中所做的那样）

3) 有时您必须调用 Materialize javascript 对象。例如：

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

幸运的是，由于我加载它的方式，我只需将其修改为：

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

我的整个 UI 框架就是 materializecss.com + Mobx。
到目前为止，它工作得很好。

于 2017-01-15T06:03:30.417 回答