什么是JSX ?
即JavaScript XML ,基于JavaScript 融合了XML,我们可以在js中书写XML, 是一种标记语言,可以自定义属性,具有可扩展性。在react中如果想向页面输出一个标签,必须用到react内置的JSX语法,否则输出的只是普通的字符串。
使用注意
必须引用babel.js文件解析JSX, script标签中添加 type="text/babel" 属性。加了这个属性,浏览器就不会解析这里边的代码,但babel可以解析,然后交给浏览器执行。
<script type="text/babel">
JSX语法
1,可以在JS中书写XML(HTML)
2,每个解构中只能有且仅有一个顶层元素
3,可以包含子节点
4,支持插值表达式
插值表达式
类似ES6的模板字符串,可以在差值表达式中书写表达式,但是不能书写语句(for循环等)。
差值表达式语法: { 表达式 } 用花括号包括里边的表达式。
在插值表达式中可以书写的数据类型:
1,字符串 和 数字 可以被输出
2,布尔值 null undefined 会被输出为空字符串(不会报错)
3, 对象在react差值表达式不能被输出,并会报错。
但是可以输出一个数组,会转成字符串。
JSX标签添加属性
基本使用和xml/html类似,格式 属性名 = 属性值,值用双引号包括。
属性值支持插值表达式,
添加属性注意点
class属性需要改为className
<div>
<h1 className="title">{this.props.data.name}</h1>
<List data={this.props.data.list}/>
</div>
style属性的值必须使用对象描述,
<li style={ {background:"#ccc"} } key={index}>
<p>{item.username}</p>
<p>{item.message}</p>
</li>