关于React之JSX语法理解

Posted 2021-12-24 ybchengxumin

**理解:**javascript和html的结合，碰到<就按照HTML来解析，碰到就按照js来解析。也可以理解为可以在js代码书写HTML标签，每个标签最终都会转化为js代码来运行。
他的语法规则大致如下：

1、必须有根元素，即最外层有且只有一个标签；
2、所有的标签必须闭合；
3、对大小写敏感，区分是组件还是Html标签；
4、属性值必须加引号或者加;
5、标签内放"<"会报错，因为他会按照Html来解析；
7、数组的循环（每个元素都会返回一个react组件）;
8、JSX允许让事件直接绑定在标签上。例如：行内样式必须使用，也就是说属性值不能是字符串，必须是对象的格式，属性名四驼峰试的。

对应解释
1:
render()
return(
<div>
所有的页面内容都要在这个标签内书写，如果同级别再出现一个标签，会报错
</div>
)

1
2
3
4
5
6
7
3：

<Tab></Tab> //会被识别为一个组件，使用之前需要从对应的位置引用，否则会报错
<div></div> //被识别为一个Html标签
1
2
4：

<div className= className="" style=></div> //所有的属性都只有这两种格式
1
6：

data.map((item,index)=>
return(
<li></li> //li标签相当于一个组件，此处li标签的同级不能放其他标签也是遵循JSX语法
)
)
1
2
3
4
5
7.关于事件绑定，通常使用的方式有三种，1、使用bind绑定；2、使用箭头函数；3、使用class属性的方式

1：
handleClick()console.log(this) //此处this打印结果就是该组件的实例，如下图
render()
return(
<div onClick=this.handleClick.bind(this)></div>
)

2:
handleClick()console.log(this) //此处this打印结果就是该组件的实例，如下图
render()
return(
<div onClick=()=>this.handleClick()></div>
)

3:
handleClick=()=>console.log(this) //此处this打印结果就是该组件的实例，如下图.要用箭头函数才行，否则找不到this
render()
return(
<div onClick=this.handleClick></div>
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

区别：第一种、第二种，每次render都会重新绑定一次，且第二种参数需要传递两次；
第三种无法绑定参数，通常用于在组件之间的传递，子组件接收方式：this.props.handleClick就可以拿到。
第三种使用场景：例如：一个计步器是一个单独的组件，在不同的父组件中需要用到，可以使用

//父组件
export default class F_component extends Component
state=
tepper:0,

changeStepper = (str)=>
if(str===‘red‘)
this.setState(
stepper:this.state.stepper-1
)

if(str===‘add‘)
this.setState(
stepper:this.state.stepper+1
)


render()
return(
<div>
<C_component stepper=this.state.stepper changeStepper=this.changeStepper/>
</div>
)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//子组件
export default class C_component extends Component
transf=(str)=>
this.props.changeStepper(str)

render()
return(
<div>
<span onClick=this.transf.bind(this,"red")>-</span>
<input value=this.props.stepper onChange=()=>/>
<span onClick=this.transf.bind(this,"add")>+</span>
</div>
)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

此处样式忽略，这样一个计步器，就可以在任何页面使用，同时，在父组件也可以拿到计步器当前的数值
注意：在子组件中如果直接通过this.props.changeStepper调用父组件的方法也可以，这样的话就需要传递两个方法过来，同时不能加()，否则会直接调用，从而报错。如果通过中间函数转换一次就可以保证功能的情况下书写简单。