React JSX使用
搞前端的小菜 人气:0JSX概述
由于通过React.createElement()方法创建的React元素代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,开发时写代码很不友好。
React使用JSX来替代常规的JavaScript,JSX可以理解为的JavaScript语法扩展,它里面的标签申明要符合XML规范要求。
- React不一定非要使用JSX,但它有以下优点:
- JSX执行更快,因为它在编译为JavaScript代码后进行了优化
- 它是类型安全的,在编译过程中就能发现错误
- 声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率速度
- JSX语法:
- 定义虚拟DOM时,不要用引号
- 标签中混入js表达式时要用{}
- 样式的类名指定不要用class,要用className
- 内联样式,要用style={{key: value}}的形式去写
- 只有一个根标签
- 标签必须闭合
- 标签首字母:
- 小写字母开头,则会将标签转为html中同名标签,若html标签中无对应的同名元素,编译会报错
- 大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错
开始本文正文,下面看下React中的JSX { }的使用,具体内容如下所示:
在做react开发的时候,我们知道最后要通过render方法来将React元素挂载到真实的DOM上。而创建一个React元素,可以通过两种方式创建。
(1)通过JSX方式
(2)通过React.createElement()方法创建
而JSX的方式,最终也会被babel转换,变成通过React.createElement()方法进行创建。
之所以这样子,是因为JSX能够很大程度的方便开发,可以少写很多代码。
而本篇文章就是讲解一下如何在React中使用JSX。
1.在JSX中使用{ }
例如当我们通过JSX创建一个React元素:
let a = 1 const div = <div></div>
而在这个div中想使用变量a,我们就可以通过{}来对变量进行引入。
(1)引入变量
const div = <div>{a}</div> //变量
当然,除了引入变量这种,还有很多中方式可以在{}中进行编写。
(2)引入对象属性
let empty = { a: 1, b: 2 } const div = <div>{empty.a}</div> //对象属性
(3)引入计算表达式
const div = <div>{empty.a + empty.b}</div> //计算表达式
(4)引入函数
const fn = ()=>{ return 2 } const div = <div>{fn()}</div> //函数
(5)引入逻辑表达式
const div = <div>{fn() === 2 ? 1 : 2}</div> //逻辑表达式
(6)引入数组
const div = <div>{[1,2,3,4,5]}</div> //数组
OK,除了上面写在大括号里的,还有几种数据类型没有引入。这里需要注意,大括号里虽然可以解析数组,但是不能解析对象(有一种特例后面会说)。
如果在大括号里面放入了对象,那么React就会报错。
同样的,如果在大括号里的是一个方法,也会报错(也有一种特例)。
如果在{}里面,引入了布尔类型,undefined,null这三种数据类型。React虽然不会报错,但是并不会渲染到真实DOM上。
2.在JSX中嵌套标签
在正常的HTML里面,标签是可以任意嵌套的。如果在React中,可以看下面的代码:
class Em extends React.Component { render(){ return <div></div> } } const div = (<div> <Em> <p>123</p> </Em> </div>)
通过上面的方式,是没办法实现出想要的效果的。因为它不符合JSX的使用规范,对于Em组件,是没有收到p标签的,所以也不会对它进行展示。
正确写法如下:
class Em extends React.Component { render(){ return <div>{this.props.children}</div> } } const div = (<div> <Em> <p>123</p> </Em> </div>)
这种方式,主要是通过props.children拿到了P标签,并且在Em组件里面渲染。
说到这里,可以说一下另一个用到{}的地方,当我们给React组件绑定属性的时候,可以通过…的方式:
let props = { a:1,b:2} const div = <div {...props}>123</div>
请记住,这里的{…props}和Es6的解构并不是一回事!
也就是这种写法只能出现在JSX里面,不能在HTML里面这么写。因为在这里babel已经对它进行了处理所以才可以这么写。
3.{}中的样式和事件处理
刚才说{}里面不应该有对象和函数,但是有个别的特例,就是style样式,和事件处理。
在JSX中给标签添加样式是这么写的:
const div = <div style={{fontSize:'14px',aaa:'2'}}></div>
也就是{}里面的,是该标签的样式对象。值得注意的是里面的key都是用小驼峰命名的。而且必须有效,不然是无法渲染到真实DOM的标签上的。
在JSX中给标签添加事件是这么写的:
const div = <div onClick={() => {console.log(123)}}>123</div>
同样,事件名也是小驼峰式命名的。
4.在JSX中使用语句
在jsx中是可以通过语句来对React元素进行处理的。例如
条件判断语句:
let div = [<div>123</div>]; if(1+1 === 2){ div.push(<div>true</div>) }else{ div.push(<div>false</div>) }
循环语句:
let div = [1,2,3,4,5].map((item,index) => { return <li key={index}>{item}</li> })
关于JSX的一些使用就先说这么多,后续有新内容会继续补充。
加载全部内容