React不渲染
[英]React does not render
问题描述
我的反应代码似乎无法正常工作。 我有以下html：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<div id="example"></div>
<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit" class="btn-primary">
</form>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script type="text/babel" src="helloworld.js"></script>
</body>
</html>
和以下反应代码
helloworld.js：
var Comment = React.createClass({
render: function(){
return(
<div>
<div className="commentText">Some Comment</div>
<button onClick="">Edit</button>
<button onClick="">Remove</button>
</div>
);
}
});
function myFunction() {
alert("hello world");
}
ReactDOM.render(
<Comment />,document.getElementById('example')
);
但是，它既不会在示例div中吐出注释，也不会调用输入字段的函数。 我怀疑我的React设置总体上有问题，这就是为什么我在同一时间将这两件事都发布在这里。 但是，构建文件夹和引用的文件确实都存在。
2 个解决方案
解决方案1
0 2016-10-16 17:09:28
它有效，请检查此链接 。
var Comment = React.createClass({
render: function(){
return(
<div>
<div className="commentText">Some Comment</div>
<button onClick="">Edit</button>
<button onClick="">Remove</button>
</div>
);
}
});
function myFunction() {
alert("hello world");
}
ReactDOM.render(
<Comment />,document.getElementById('example')
);
解决方案2
0 2016-10-17 05:17:41
由于babel-browser已被删除，因此可以利用webpack来翻译您的代码。 看到这同样反应onClick事件功能可在反应部件本身被定义在helloworld.js像
var Comment = React.createClass({
handleClick: function() {
alert("hello world");
}
render: function(){
return(
<div>
<div className="commentText">Some Comment</div>
<button onClick={this.handleClick()}>Edit</button>
<button onClick="">Remove</button>
</div>
);
}
});
function myFunction() {
alert("hello world");
}
ReactDOM.render(
<Comment />,document.getElementById('example')
);
要设置webpack，请点击此链接。 易于遵循
React元素不呈现
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.