为什么实现无法与reactjs一起使用 [英] Why is materialize not working with reactjs
问题描述
当我尝试移动一些组件以进行响应但它们不起作用时，我创建了一个带有materialize.css库的静态网页.
I created a static web page with materialize.css library, when I tried to move some components to react but they are not working.
这是我的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')
);
在浏览器中，我只能看到绿色的东西".我在做什么错了?
In the browser i only see "Stuff" in green color. What am I doing wrong?
推荐答案
首先，确保在jsx代码中使用的是className而不是class属性.
First, ensure that you are using className instead of class attribute in your jsx code.
第二，materialize.css使用 wave.js 在按钮单击上创建波浪效果，但它没有不太适合做出反应.但是您可以使用 material-ui 的涟漪图
Second, materialize.css uses 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 achieve the same effect
这篇关于为什么实现无法与reactjs一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
