react的jsx语法（转译react的jsx本质）

JSX 是一个 JavaScript 的语法扩展，它不是字符串，也不是 HTML。

JSX 可以很好地描述 UI 交互的本质形式，它具有 JavaScript 的全部功能。JSX 可以生成 React “元素”。

基本使用

\src\index.js

importReactfrom'react'
importReactDomfrom'react-dom'
//看上去是HTML，但是实际是JSX
consttitle=@lt;h1@gt;HelloReact@lt;/h1@gt;
//调用ReactDom.render方法，传入jsx和节点对象
ReactDom.render(title,document.getElementById('root'))

在使用 JSX 时，可以简单直接的按照 HTML 的规则来使用(你需要牢记它并不是 html )，那么有多行代码时，需要使用括号 () 包裹。

importReactfrom'react'
importReactDomfrom'react-dom'
//使用括号包裹jsx，可以换行，代码更加整洁
consttitle=(
@lt;div@gt;
@lt;h1@gt;HelloReact@lt;/h1@gt;
@lt;span@gt;嘿嘿嘿@lt;/span@gt;
@lt;/div@gt;
)
ReactDom.render(title,document.getElementById('root'))

设置 VS Code 编辑器，让 JSX 代码补全：

文件--首选项--设置--用户设置
在用户设置添加
@quot;emmet.includeLanguages@quot;:{
@quot;javascript@quot;:@quot;javascriptreact@quot;
}

如下图所示：

react的jsx语法（转译react的jsx本质）

JSX 表达式

前面说到 JSX 具有 JavaScript 的全部功能，而在具体使用时可以直接套用 HTML 的规则。换句话说，在 HTML 规则里，如何展现 JS 的能力呢?

先来一点简单的常常甜头，JSX 中的能够进行：

动态显示数据 {}
调用方法: 自定义 + 内置
支持表达式, 支持三元表达式
模板字符串

接下来，我们开始搞它：

importReactfrom'react';
importReactDOMfrom'react-dom';
constname='西岭老湿'
functionsayHello(){
return'大家好'
}
constobj={
name:'刘备',
age:100
}
constflag=true
//请开始你的表演====
consttitle=(@lt;h2@gt;嘿嘿@lt;/h2@gt;)//JSX本身也是可直接食用的值哟
constApp=(
@lt;div@gt;
{/*注释在jsx中是这么个熊样子*/}
@lt;p@gt;name@lt;/p@gt;{/*这就鸳鸯(原样)展示了*/}
@lt;p@gt;{name}@lt;/p@gt;{/*动态获取变量数据*/}
@lt;p@gt;{sayHello()}@lt;/p@gt;{/*调用个函数违法吗?不*/}
{/*执行原生JS不合理吗?合理*/}
@lt;p@gt;{console.log('1111')}@lt;/p@gt;
@lt;p@gt;{Math.random()}@lt;/p@gt;
@lt;p@gt;{JSON.stringify(obj)}@lt;/p@gt;
{/*三元运算让你吃醋了?没有*/}
@lt;p@gt;{flag?'登录的状态':'执行登录'}@lt;/p@gt;
{/*模板字符下,字符串和变量结婚,可以吗?可以*/}
@lt;p@gt;{`hello,${name}`}@lt;/p@gt;
{/*JSX也是可直接食用的值哟*/}
@lt;div@gt;{title}@lt;/div@gt;
@lt;/div@gt;
)
ReactDOM.render(App,document.getElementById('root'));

JSX 本身就一个表达式
JSX 添加属性：

字符串属性，直接使用双引号包裹

动态属性，不用双引号，直接使用 {} class={xxx}

JSX 添加子元素

JSX 只有一个父元素

单标签必须闭合

//01jsx本身就是一个表达式
constnames=@lt;h3@gt;西岭老湿@lt;/h3@gt;
//02添加属性
constage=99
//03jsx添加子元素（JSX只有一个父元素）
//04单标签必须闭合
//组件
functionApp(){
return(
//返回中只能有一个JSX块
//@lt;p@gt;@lt;/p@gt;//报错
@lt;div@gt;
{/*jsx本身就是一个表达式*/}
{names}
{/*添加属性*/}
@lt;page=@quot;age@quot;@gt;用户年龄属性@lt;/p@gt;{/*字符串属性*/}
@lt;page={age}@gt;用户年龄属性@lt;/p@gt;{/*动态属性*/}
{/*单标签必须闭合*/}
{/*@lt;img@gt;*/}{/*报错*/}
{/*单标签正确写法*/}
@lt;img/@gt;
@lt;/div@gt;
);
}
exportdefaultApp;

最后，JSX 最好使用一个小括号 () 包裹。

事件绑定

事件处理函数和事件绑定

//事件处理函数
constevent1=function(){
alert('嘿嘿React')
}
functionApp(){
return(
@lt;div@gt;
@lt;h1@gt;事件绑定@lt;/h1@gt;
{/*事件名使用驼峰法命名、直接使用函数赋值，不是函数调用*/}
@lt;buttononClick={event1}@gt;你点啊@lt;/button@gt;
@lt;/div@gt;
)
}
exportdefaultApp

事件传参

事件处理函数和事件绑定

因为事件绑定需要接收函数本身，作为事件处理，不能直接调用。

//事件传参
constevent1=function(name,age){
alert(name)
alert(age)
}
functionApp(){
return(
@lt;div@gt;
@lt;h1@gt;事件绑定@lt;/h1@gt;
{/*因为事件绑定需要接收函数本身，作为事件处理，不能直接调用*/}
{/*因此传参需要使用箭头函数返回事件处理函数,而不能是函数调用*/}
@lt;buttononClick={()=@gt;{event1('西岭',16)}}@gt;你点啊@lt;/button@gt;
@lt;br/@gt;
{/*或者使用bind等其方式，将函数本身作为返回值传入*/}
@lt;buttononClick={event1.bind(null,'嬴政',999)}@gt;你再点一下试试@lt;/button@gt;
{/*再次强调JSX就是JS扩展，就是JS*/}
@lt;/div@gt;
)
}
exportdefaultApp

因此传参需要使用箭头函数返回事件处理函数,而不能是函数调用，或者使用 bind 等其方式，将函数本身作为返回值传入。

再次强调 JSX 就是 JS 扩展，就是 JS。

事件对象传参

01 函数无传参：

事件对象默认传入，因此直接在事件处理函数中形参接收即可。

02 箭头函数传参：

因为事件对象有默认传入，而使用箭头函数时，则需要在箭头函数中传入后，再在箭头函数返回的函数中传入。

03 bind 等其方式：

将函数本身作为返回值传入，事件对象默认会添加在最后一个参数中。

无论有无参数传入，事件对象都不需要写，事件处理函数按顺序接收即可。

//事件对象传参
constevent1=function(ev){
console.log(ev);
}
functionApp(){
return(
@lt;div@gt;
@lt;h1@gt;事件绑定@lt;/h1@gt;
{/*01函数无传参*/}
{/*事件对象默认传入，因此直接在事件处理函数中形参接收即可*/}
@lt;buttononClick={event1}@gt;点一下？@lt;/button@gt;@lt;br/@gt;
{/*02箭头函数传参
因为事件对象有默认传入，而使用箭头函数时，则需要在箭头函数中传入后
再在箭头函数返回的函数中传入*/}
@lt;buttononClick={(ev)=@gt;{event1(ev,'西岭',16)}}@gt;你点啊@lt;/button@gt;@lt;br/@gt;
{/*03bind等其方式
将函数本身作为返回值传入，事件对象默认会添加在最后一个参数中
无论有无参数传入，事件对象都不需要写，事件处理函数按顺序接收即可*/}
@lt;buttononClick={event1.bind(null)}@gt;你再点一下试试@lt;/button@gt;
@lt;/div@gt;
)
}
exportdefaultApp

列表渲染

JSX 默认会对数组进行结构，因此可以直接在 JSX 中展示数组的值。

constitem1=[1,3,5]
functionApp(){
return(
@lt;div@gt;
{/*JSX默认会对数组进行结构*/}
@lt;h1@gt;{item1}@lt;/h1@gt;
@lt;/div@gt;
)
}
exportdefaultApp

同理，如果数组元素值也是 JSX，同样可以进行直接使用。

constitem1=[1,3,5]
constitem2=[
@lt;p@gt;item1@lt;/p@gt;,
@lt;p@gt;item1@lt;/p@gt;,
@lt;p@gt;item1@lt;/p@gt;
]
functionApp(){
return(
@lt;div@gt;
{/*JSX默认会对数组进行结构*/}
@lt;h1@gt;{item1}@lt;/h1@gt;
{/*数组值为jsx同样可以直接使用*/}
@lt;div@gt;
{item2}
@lt;/div@gt;
@lt;/div@gt;
)
}
exportdefaultApp

而在项目中，大部分获取到的数组元素是对象数据，要对其进行结构展示，就需要对数组进行循环操作后使用。

//数组数据
constarr=[
{id:1,name:'痴心绝对'},
{id:2,name:'像我这样的人'},
{id:3,name:'南山南'}
]
//===数据遍历===
functionloops(){
vara2=[]
//循环遍历数据
for(vari=0;i@lt;arr.length;i++){
//将数组内容结构为JSX数组
a2.push(@lt;h1key={arr[i].id}@gt;{arr[i].name}@lt;/h1@gt;)
}
returna2
}
functionApp(){
return(
@lt;div@gt;
{/*调用遍历函数，获取JSX数组展示*/}
{loops()}
@lt;/div@gt;
)
}
exportdefaultApp

这样的方式因为过于繁琐，并不推荐使用。

但是，基本思路是不变的，因为 JSX 可以自动结构数组结构，我们只需要将数据的数据遍历为 JSX 数据形式使用就可以了，因此，我们可以选择一种更为优雅的遍历方式map() 函数。

//数组数据
constarr=[
{id:1,name:'绝对痴心'},
{id:2,name:'像我这样帅的人'},
{id:3,name:'南山难'}
]
functionApp(){
return(
@lt;div@gt;
{/*map方法遍历数组*/}
{arr.map(item=@gt;@lt;h3@gt;{item.id}--{item.name}@lt;/h3@gt;)}
@lt;/div@gt;
)
}
exportdefaultApp

样式设置

内联样式

样式需要以对象形式展示：

//声明样式对象
conststyles={
color:'red',
//样式的属性名需要处理,要么
//font-size:'20px',//直接使用报错
fontSize:'30px',//转大写√
'background-color':'pink'//引号包裹√
}
functionApp(){
return(
@lt;div@gt;
{/*内联样式需要以对象形式展示*/}
@lt;h3style={{color:@quot;red@quot;}}@gt;西岭老湿@lt;/h3@gt;
@lt;pstyle={styles}@gt;真的很帅@lt;/p@gt;
@lt;/div@gt;
)
}
exportdefaultApp

外联样式

创建对应的 CSS 文件，使用模块化语法规则引入样式文件。

创建 CSS 文件 \src\App.css

body{
background-color:skyblue;
color:blue;
}
.box{
font-size:30px;
}

\src\App.js

//引入外联样式文件
import'./App.css'
functionApp(){
return(
@lt;div@gt;
@lt;h3@gt;小蓝同学@lt;/h3@gt;
@lt;pclassName=@quot;box@quot;@gt;胖蓝@lt;/p@gt;
@lt;/div@gt;
)
}
export default App

条件渲染

条件渲染就是函数调用。

importReactfrom'react'
importReactDomfrom'react-dom'
varf=false
constfun1=()=@gt;{
if(f){
return(@lt;h1@gt;哈哈哈哈@lt;/h1@gt;)
}else{
return(@lt;h2@gt;嘿嘿@lt;/h2@gt;)
}
}
consttitle=(
//使用括号，可以换行，代码更加整洁
@lt;div@gt;
{fun1()}
@lt;/div@gt;
)
ReactDom.render(title,document.getElementById('root'))

原文链接：https://mp.weixin.qq.com/s/5o7cieCgHXy2dxDHvxLSMA

如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）

关于作者：访客

react的jsx语法（转译react的jsx本质）

基本使用

JSX 表达式

事件绑定

事件传参

事件对象传参

列表渲染

样式设置

条件渲染

发表评论取消回复

业务办理

运营商合作

基本使用

JSX 表达式

事件绑定

事件传参

事件对象传参

列表渲染

样式设置

条件渲染

为您推荐：

发表评论 取消回复

业务办理

运营商合作

发表评论取消回复