为什么 materialize 不能与 reactjs 一起使用

IT技术 reactjs material-design materialize
2021-05-19 18:01:10

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

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

在浏览器中，我只看到绿色的“东西”。我究竟做错了什么？

2个回答

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

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

实际上，与使用 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。
到目前为止效果很好。

其它你可能感兴趣的问题
上一篇React - 使用 axios 将图像上传到 Imgur 返回 ERR_HTTP2_PROTOCOL_ERROR 下一篇如何更改react内容中的每个单词颜色