jsx模板语法介绍
- JSX(javascript xml)在javascript的基础上结合了xml语法
- jsx模板语法不能直接被浏览器解析
- jsx模板可以被babel进行解析
- jsx模板语法只针对于react所使用
1.xml语法结构
- xml严格区分大小写
- xml中双标签必须要有开始和结束符
- xml中单标签必须要有结束符
- xml中有且只能有一个根节点
2.jsx语法结构
- * 1.jsx模板严格遵循xml语法
- * 2.jsx模板语法中双标签必须要有开始和结束
- * 3.jsx模板语法中单标签必须要有结束
- * 4.jsx模板语法中有且只能有一个根标签
- * 5.jsx模板语法严格区分大小写
3.jsx模板语法
- 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
//书写jsx模板语法
/**
* 1.jsx模板严格遵循xml语法
* 2.jsx模板语法中双标签必须要有开始和结束
* 3.jsx模板语法中单标签必须要有结束
* 4.jsx模板语法中有且只能有一个根标签
* 5.jsx模板语法严格区分大小写
*/
const div = <div>
<h3>标题三</h3>
<img src="./images/nanshidiao.jpg" alt="" />
<p>
<h2>标题2</h2>
</p>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
- 模板变量的使用
文本内容:使用{}解析js语法
属性: 属性名={js语法}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
const msg = '标题三';
const url = './images/nanshidiao.jpg';
//书写jsx模板语法
/**
* 1.jsx模板严格遵循xml语法
* 2.jsx模板语法中双标签必须要有开始和结束
* 3.jsx模板语法中单标签必须要有结束
* 4.jsx模板语法中有且只能有一个根标签
* 5.jsx模板语法严格区分大小写
*/
const div = <div>
<h3>{msg}</h3>
<img src={url} alt="" />
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
-
模板方法的使用
-
调用系统方法
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 2.引入react --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- 3.引入babel --> <script src="./libs//babel.min.js"></script> </head> <body> <!-- 1.创建容器 --> <div id="container"> </div> <!-- 1.type="text/babel" 解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析 --> <script type="text/babel"> const str = 'i have an apple'; // 书写jsx模板语法 const div = <div> {/*这里写注释内容*/} {/*调用系统方法*/} <div>{str.toUpperCase()}</div> </div> ReactDOM.render(div,document.querySelector('#container')) </script> </body> </html> -
调用自定义方法
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 2.引入react --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- 3.引入babel --> <script src="./libs//babel.min.js"></script> </head> <body> <!-- 1.创建容器 --> <div id="container"> </div> <!-- 1.type="text/babel" 解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析 --> <script type="text/babel"> const str = 'i have an apple'; function fn(str){ return str.split('').reverse().join('') } // 书写jsx模板语法 const div = <div> {/*这里写注释内容*/} {/*调用系统方法*/} <div>{str.toUpperCase()}</div> {/*调用自定义方法*/} <div>{fn(str)}</div> </div> ReactDOM.render(div,document.querySelector('#container')) </script> </body> </html>
-
-
模板注释
-
{/*这里写注释内容*/}
-
-
条件渲染
- 不能使用if结构做条件判断
- 使用三元运算符做条件判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
let age = 30;
// 书写jsx模板语法
const div = <div>
{/*在jsx模板语法中不能使用if结构做条件判断*/}
{/*<div>{if(age>=18){'已成年'}else{'未成年'}}</div>*/}
{/*使用三元运算符做条件判断*/}
<div>{age>=18 ? '已成年' : '未成年'}</div>
<hr />
<div>{age>=18 ?<h2>已成年</h2> : <h3>未成年</h3>}</div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
- 关键字
className为设置标签的选择器htmlFor设置label标签的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
<style>
.main{
background: skyblue;
}
</style>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
// 书写jsx模板语法
const div = <div className="main">
<h3>标题三</h3>
<label htmlFor="search">搜索</label>
<input type="text" id="search" />
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
-
通过
style指定行内样式 -
style属性值采用{{}}来书写
-
{{}}: 外层{}: #指jsx模板语法 内层:{}: #指一个json对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
<style>
.main{
background: skyblue;
}
</style>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
const obj = {background:'red',color:'yellow'};
// 书写jsx模板语法
const div = <div className="main">
{/*错误写法*/}
{/*<h3 style="background:'red';color:'yellow'">窈窕淑女,君子好逑</h3>*/}
<h3 style={obj}>窈窕淑女,君子好逑</h3>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
- 列表的渲染
- 在遍历数组时,key需要绑定在遍历的直接子元素上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
<style>
.main{
background: skyblue;
}
</style>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
let arr = ['朝阳区','海淀区','通州区'];
let arr1 = [<h2 key="0">海淀区</h2>,<h2 key="1">朝阳区</h2>,<h2 key="2">通州区</h2>]
// forEach 没有返回值
let arr2 = [];
arr.forEach(item=>{
arr2.push(item)
})
// map #有返回值
let arr3 = arr.map((item,index)=>{
return <h3 key={index}>{item}</h3>
})
// 复杂的数组
let brand = [
{
id:1,
name:'宝马',
price:500000
},
{
id:2,
name:'奔驰',
price:1000000
},
{
id:3,
name:'奥迪',
price:400000,
}
]
// 书写jsx模板语法
const div = <div className="main">
{/*以字符串的形式展示数组*/}
{arr}
<hr />
{arr1}
<hr />
{arr2}
<hr />
{arr3}
<hr />
{arr.map((item,index)=>{
return <h3 key={index}>{item}</h3>
})}
{/*变形写法*/}
{arr.map((item,index)=><h3 key={index}>{item}</h3>)}
<hr />
{/*在遍历数组时,key需要绑定在遍历的直接子元素上*/}
{brand.map(item=>(
<div key={item.id}>
<h2>{item.name}</h2>
<div>{item.price}</div>
</div>
))}
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
- 富文本
- dangerouslySetInnerHTML={{__html:变量名}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
<style>
.main{
background: skyblue;
}
</style>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
const str = `
<div>
<h1>今夕何夕</h1>
<img src="./images/nanshidiao.jpg" />
</div>
`;
// 书写jsx模板语法
const div = <div className="main">
<div dangerouslySetInnerHTML={{__html:str}}></div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
总结:
1.特点:
a.组件化 b.数据驱动结合视图渲染来构建单页面应用 c.react没有指令,计算属性.过滤器.监听
d.react中没有自动的数据双向绑定 e.react.js的核心React f.react-dom.js的核心是ReactDOM
2.使用方式:
a.直接引入
b.npm i react
3.React.createElement(创建的元素,{属性集合},文本内容)
4.ReactDOM.render(元素对象,元素的作用域)
5.jsx模板语法
a. jsx模板不能被浏览器解析
b. jsx模板需要被babel进行解析
c. jsx主要用来构建react项目
6.jsx模板语法规范
a. 严格区分大小写
b. 双标签必须有开始和结束
c. 单标签必须有结束
d. 有且只有一个根节点
7.jsx模板语法中常见的用法
变量: {}
方法: {str.toUpperCase()} {fn()}
数组: forEach(没有返回值) map(有返回值)
{arr.map(item=>(.......))}
条件渲染: 三元运算符
关键字: className htmlFor
注释: {/*这里写注释*/}
富文本渲染: dangerouslySetInnerHTML={{__html:变量名}}
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
