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

【问题标题】：Why is materialize not working with reactjs为什么物化不能与reactjs一起使用
【发布时间】：2015-06-22 03:06:33
【问题描述】：

我用 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”。我做错了什么？

【问题讨论】：

检查您的拼写...
对不起，英语不是我的母语。
文档暗示它需要 JavaScript：materializecss.com/waves.html#!去工作？是否有可能因为在加载 materialize.min.js 文件之后才呈现按钮，所以它的行为不符合预期？
@WiredPrairie 我不这么认为，因为如果我没记错的话，Js 会加载内联，jsx 中的那一行在 html 中将是相同的，但我会尝试在这里发表评论。谢谢
如果波形代码没有附加到 DOM 元素，或者它意外地操作它们，它就是。它可能会起作用。并非每个库都与 React 兼容。

标签： reactjs material-design materialize

【解决方案1】：

实际上，我使用 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。
到目前为止效果还不错。

【讨论】：

【解决方案2】：

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

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

【讨论】：

我必须在哪里添加 ClassName ？
谢谢我想通了，在
@xzvkm 它工作正常，但你必须使用 componentDidMount 来触发 materialize-css 使用的任何与 JS 的绑定......显然有一些项目将 materialize-css 作为反应组件提供适当的绑定到位。