ReactDOM.render()

ReactDOM.render()方法是将模板转化为HTML语言,并插入指定的DOM节点。例如:

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>  //指定的DOM节点
<script type="text/babel">  
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

 

自己测试代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ReactDOM.render()方法</title>
<script src="reactPack/react.js"></script>
<script src="reactPack/react-dom.js"></script>
<script src="reactPack/browser.min.js"></script>

<style type="text/css">
#test1{
width:auto;
height:50px;
background-color:orange;
}
</style>

</head>

<body>

<div id="test1"></div>

<script type="text/babel"> //这个<scripe>标签里面的是type。。。。不要在写错了(src,o_o)
//在ReactDOM.render()这个方法里面每一句代码结束时用逗号,最后一句啥符号都不用,一定不能用分号
ReactDOM.render(
<p>试一试ReactDOM.render()方法,看看是怎样插入指定DOM节点的</p>,
document.getElementById("test1")//获取指定DOM,是在ReactDOM.render()方法里面的
);

</script>

</body>
</html>

posted @ 2017-07-03 15:36  爱美的女孩儿  阅读(1408)  评论(0编辑  收藏  举报