JSX语法总结1
1、HTML代码可以直接用到JS里面，不用加任何标点符号。JSX解析时，遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头），就用JS规则解析。例子如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JSP语法1--HTML代码可以直接写到JS里面</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">
#test2{
width:auto;
height:100px;
background-color:orange;
}
</style>
</head>
<body>
<div id="test2"></div>
<script type="text/babel">
var arr = ["hello","world","wilful","宋梦瑶"];
ReactDOM.render(
<div>
{
arr.map(function(index){
return <div>哈哈,{index}</div>
})
}
</div>,
document.getElementById("test2")
);
</script>
</body>
</html>
2、可以直接在模板中插入JS变量，例子如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JSX语法2-可以在模板直接插入JS变量</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">
#test2{
width:auto;
height:100px;
background-color:orange;
}
</style>
</head>
<body>
<div id="test2"></div>
<script type="text/babel">
var arr = ["shangHai","mianLi","jiaoYu","gongSi"];
ReactDOM.render(
<div>
{
arr//有返回值
}
</div>,
document.getElementById("test2")
);
</script>
</body>
</html>
