一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情
2. JSX语法基本使用
JSX(JavaScript XML):JavaScript语法扩展,用于描述UI界面,可以与JS融合在一起使用(all-in-js),与Vue的模块语法区别是不需要学习换用的语法指令,例如(v-for、v-if、v-else、v-bind)等等。
React使用JSX原因:渲染逻辑本质与其他UI逻辑存在耦合,例如绑定事件、UI展示数据状态和改变
JSX书写规范:
- JSX顶层只能有一个根元素(通常用一个div进行包裹,也可以使用Fragment)
- 为阅读方便,通常使用()包裹JSX外层,中间可以换行
- JSX中可以是单标签(需要以/>结尾),也可以是双标签
- 注释格式:
{/*一段注释*/}
2.1 用法举例:
// 添加babel依赖
<script src='../react/babel.min.js'></script>
// 添加渲染元素
const element = <h2>Hello world</h2> // jsx语法
ReactDOM.render(element, document.getElementById('app'))
note:Vue实际可以用jsx语言
2.2 JSX嵌入变量
// 创建变量
this.state = {
name: 'why', //String
age: 18, // Number
names: ['james', 'curry', 'kobe'] // Array
}
// 嵌入
<h2>{this.state.name}</h2>
<h2>{this.state.age}</h2>
<h2>{this.state.names}</h2>
注意:
- {} 中不能渲染的变量:null undefined Boolean 不显示的原因:设计时用于屏蔽某些不想渲染出来的内容 若需要显示:转换为String类型:{var.toString()} or {String(var)} or {var + ''}
- {} 对象不能作为React的子元素 (not a valid as a React child)
2.2 JSX 嵌入表达式
- 支持嵌入:运算表达式、三元运算符、函数执行
<div>
<h2>{this.state.name + " has a friend " + this.state.friend}</h2>
<h2>{this.state.name === 'kobe'? "codewhy" : "false"}</h2>
<h2>{this.aFun()}</h2>
</div>
2.3 jsx绑定
- 绑定属性
- title: 鼠标悬停时可以显示元素额外信息
- src: 绑定图片URL地址
- alt: 图片不能正常显示的替换文本
- herf: a元素绑定网址
- target: 打开网址目标(_blank新标签打开)
- className: 新增一个样式
- style: 使用原生内联样式
<div>
{/* 1、绑定普通属性 */}
<h2 title={title}>我是标题</h2>
<img src={this.getSizeImage(imgUrl, 80)} alt='lxx'></img>
<a href={link} target='_blank'>百度一下</a>
{/* 2、绑定class */}
<div className='box title'>我是div元素</div>
<div className={'box title' + (active ? ' active' : '')}>我也是div元素</div>
{/* 3、绑定style */}
<div style={{ color: 'red', fontSize: '50px'}}>我也是div绑定了style属性</div>
</div>
- 绑定事件
- onClick: 点击触发事件(react内部回调函数this===undefined )
- 绑定this方法:显示绑定bind(obj), 使用箭头函数
- onClick: 点击触发事件(react内部回调函数this===undefined )
class App extends React.Component{
constructor(props){
super(props)
this.state = {
btnMessage: '点击了按钮1',
incrementMessage: 'add+++',
decrementMessage: 'minus---'
}
this.increment = this.increment.bind(this)
}
render() {
return (
<div>
<button onClick={this.btnClick.bind(this)}>按钮1</button>
<button onClick={this.increment}>+1</button>
<button onClick={() => { this.decrement() }}>-1</button>
</div>
)
}
btnClick() {
console.log(this.state.btnMessage);
}
increment() {
console.log(this.state.incrementMessage);
}
decrement() {
console.log(this.state.decrementMessage);
}
}
- 绑定事件-传递参数
- react传递的event作为箭头函数参数传入
render() {
return (
<div>
<button onClick={(event) => {this.btnClick(event)}}>按钮2</button>
<ul>{
this.state.movies.map((item, index) => {
return (
<li className='item'
title='li'
onClick={e => {this.liClick(e, item, index)} }>
{item}
</li>
)
})
}</ul>
</div>
)
}
btnClick(e) {
console.log('点击了按钮2: ', e); // react 内部合成的对象,非原生
}
liClick(e, item, index) {
console.log('点击了li:', item, index, e);
}