Question

我创建了一个带有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')
);

在浏览器中我只看到＆＃34; Stuff＆＃34;绿色。我做错了什么？

Answer 1

首先，确保在jsx代码中使用className而不是class属性。

其次，materialize.css使用wave.js来创建按钮点击的波形效果，并且它与反应非常吻合。但你可以使用material-ui的Ripple components达到同样的效果

Answer 2

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

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

2）到目前为止，任何时候任何事情都不起作用，因为我输入了＃34; class＆＃34;而不是＆＃34; className＆＃34; （正如你在你的例子中所做的那样）

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

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

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

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

我的整个UI框架只是materializecss.com + Mobx 到目前为止，它的表现相当不错。

为什么物化不能与reactjs一起使用

2 个答案: