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

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')
);

在浏览器中我只看到绿色的 "Stuff"。我做错了什么？

Answer 1

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

二、materialize.css使用wave.js to create a wave effect on button clicks and it doesn't fit quite well with react. But you can use material-ui`s Ripple components达到同样的效果

Answer 2

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

1) 我确实通过主页上的 link 加载了 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。
到目前为止效果很好。

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

Why is materialize not working with reactjs

materialize

reactjs

material-design