React（二）JSX语法

JSX是一种JavaScript的语法扩展，用于描述UI界面，并且能与JavaScript融合使用，接下来就看看如何在jsx中使用js吧

基本使用

在vue中通过mustache语法({{ }})来嵌套一个变量或者表达式，而在jsx中直接在{ }中写入就可以了，通过上一次的学习，知道如何创建一个类组件以及怎样提供数据并使用，现在就看看不同类型的值，在进行渲染时产生的效果

1. Number、String、Array可以直接展示

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      str: "Hello React",
      num: 100,
      arr: [1, 2, 3, 4, 5],
    }
  }
  render() {
    return (
      <div>
        <h1>Number: {this.state.num}</h1>
        <h1>String: {this.state.str}</h1>
        <h1>Array: {this.state.arr}</h1>
      </div>
    )
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)

2. undefined，null，bool等类型展示时内容为空

render() {
  return (
    <div>
      <h1> {undefined}</h1>
      <h1> {null}</h1>
      <h1> {true}</h1>
    </div>
  )
}

如果要展示这些，需要将其转化为字符串

render() {
 return (
   <div>
     <h1> {undefined + ""}</h1>
     <h1> {null + ""}</h1>
     <h1> {true + ""}</h1>
  </div>
 )
}

3. Object类型不可以作为子元素，会直接报错

以上的情况只是当变量作为子元素时，而作为属性值时另提

事件绑定

事件命名采用的小驼峰，形如onClick，通过{}传入一个回调，在触发事件时会调用

class App extends React.Component {
  constructor() {
    super()
    this.state = {}
  }
  handler() {
    console.log("事件触发")
  }
  render() {
    return (
      <div>
        <button onClick={this.handler}>点我触发事件</button>
      </div>
    )
  }
}

这就是给元素绑定事件的方，但是这个事件句柄用到了this时，会发现这个this的指向和我们想象的不一样，修改handler如下

handler() {
  console.log("事件触发", this)
}

触发结果为事件触发 undefined，可以看见this指向乱了，接下来就看看怎样让this正确指向吧

react经过一系列操作之后，handler在真正调用的时候属于独立调用应该指向window，但是这里用了babel默认开启了严格模式，所以this是undefined

this

在官网中有说过React事件处理，可以通过以下做法使this正确指向

1. 通过bind显式的将句柄中的this绑定

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      mes: "Hello React",
    }
    // 
    this.handler = this.handler.bind(this)
  }
  handler() {
    console.log("事件触发", this)
  }
  render() {
    return (
      <div>
        <button onClick={this.handler}>点我触发事件</button>
      </div>
    )
  }
}

2. public class fields 语法，声明函数时直接使用箭头函数

handler = () => {
  console.log("事件触发", this)
}

3. 绑定事件时，回调使用箭头函数

handler() {
  console.log("事件触发", this)
}
<button onClick={() => this.handler()}>点我触发事件</button>

这三种方法都能使this正确绑定

参数传递

有时候想要给触发事件时传入一些参数（event，其他参数），在确保this指向正确的情况下，有以下两种情况：

1. 当使用bind方案时（绑定时bind），event在最后一个位置，其他参数从前排列

 handler(num1, num2, num3, e) {
   console.log(num1, num2, num3)
   console.log(e)
   console.log("事件触发", this)
 }
 render() {
   return (
     <div>
       <button onClick={this.handler.bind(this, 1, 2, 3)}>
         点我触发事件
       </button>
     </div>
   )
 }

2. 使用回调使传入箭头函数时

handler(e, num1, num2, num3) {
  console.log(num1, num2, num3)
  console.log(e)
  console.log("事件触发", this)
}
render() {
  return (
    <div>
      <button onClick={(e) => this.handler(e, 1, 2, 3)}>
        点我触发事件
      </button>
    </div>
  )
}

条件渲染

React中的条件渲染就是通过if三目运算等方式实现

constructor() {
  super()
  this.state = {
    mes: "Hello React",
    isOk: true,
  }
}
render() {
  let el = null
  if (this.state.isOk) {
    el = <h1>I am OK</h1>
  }
  return (
    <div>
      {/* if判断 */}
      {el}
      {/* 三目 */}
	  {this.state.isOk ? <h1>I am OK</h1> : null}
	  {/* 与运算 */}
      {this.state.isOk && <h1>I am OK</h1>}
      <button onClick={() => this.setState({ isOk: !this.state.isOk })}>
        点我切换ok
      </button>
    </div>
  )
}

这样通过点击按钮，三个的展示都一样

列表渲染

列表渲染通过for循环或者map等高阶函数就可以实现

遇数组会自己遍历渲染

constructor() {
  super()
  this.state = {
    mes: "Hello React",
    lists: ["标题一", "标题二", "标题三"],
  }
}
render() {
  let list = []
  for (let i = 0; i < this.state.lists.length; i++) {
    list.push(<h1 key={i}>{this.state.lists[i]}</h1>)
  }
  return (
    <div>
      {list}
      {this.state.lists.map((item) => (
        <h1 key={item}>{item}</h1>
      ))}
    </div>
  )
}

列表渲染需要绑定key值

规范

1. jsx结构中只能有一个根元素
2. jsx既可以是单标签也可以是双标签，但是单标签必须以/闭合