2. JSX语法基本使用

111 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 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书写规范:

  1. JSX顶层只能有一个根元素(通常用一个div进行包裹,也可以使用Fragment)
  2. 为阅读方便,通常使用()包裹JSX外层,中间可以换行
  3. JSX中可以是单标签(需要以/>结尾),也可以是双标签
  4. 注释格式:{/*一段注释*/}

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), 使用箭头函数
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);
}