JSX語法總結1

時間  2019-12-11
標籤 jsx 語法 總結 简体版
原文   原文鏈接

一、HTML代碼能夠直接用到JS裏面，不用加任何標點符號。JSX解析時，遇到HTML標籤（以<開頭），就用HTML規則解析；遇到代碼塊（以{開頭），就用JS規則解析。例子以下：css

<!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>html

<style type="text/css">
#test2{
width:auto;
height:100px;
background-color:orange;
}
</style>
</head>react

<body>
<div id="test2"></div>babel

<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>dom

 

二、能夠直接在模板中插入JS變量，例子以下：ui

<!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>spa

<style type="text/css">
#test2{
width:auto;
height:100px;
background-color:orange;
}
</style>
</head>htm

<body>
<div id="test2"></div>ip

<script type="text/babel">
var arr = ["shangHai","mianLi","jiaoYu","gongSi"];
ReactDOM.render(
<div>
{
arr//有返回值
}
</div>,
document.getElementById("test2")
);
</script>
</body>
</html>utf-8

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程