React基础语法 — JSX语法

乘嘘圆宝宝

已于 2023-10-07 11:27:17 修改

阅读量49

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2023-10-07 11:25:43 首次发布

本文链接：https://blog.csdn.net/weixin_47342392/article/details/133633922

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一名技术栈是vue的开发者，在工作之余学习react的一些知识积累，以下文章是我在react学习过程中总结react一些基础只是---JSX语法。

一、基本使用

1.书写规范

JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素
为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写；
JSX中的标签可以是单标签，也可以是双标签。注意：如果是单标签，必须以/>结尾。

import React from "react";

class HelloWorld extends React.Component {
  constructor() {
    super()
    this.state = {
      message: '我是kk'
    }
  }

  render() {
    return (
      <div>
        {this.state.message}
      </div>
    )
  }
}

export default HelloWorld

2.jsx的绑定属性

基本属性
title属性
src属性
href属性
绑定class（注意尽量使用className 不要使用class 因为class是关键字）
内联样式style （注意绑定属性可以使用对象插入，但是子元素不能使用对象插入）

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      message: '哈哈哈',
      title: 'kk',
      imgURL: 'https://uat-xw.seewintech.com/static/img/nodata1.808a6a2d.svg',
      isActive: false,
      styleObject: {
        color: '#ccc',
        fontSize: '24px'
      }
    }
  }

  render() {
    const { message, title, imgURL, isActive, styleObject } = this.state
        
      return (
        <div>
          {/* 一、绑定基本属性 */}  
          <h2>{message}</h2>
          {/* 二、绑定title属性 */}
          <h2 title={title}>哈哈哈</h2>
          {/* 三、绑定title属性 */}
          <img src={imgURL} alt=""/>
          {/* 四、绑定href属性 */}
          <a href="https://gitlab.seewintech.com/zjzd-ibuilds/ibuilds-web3.0">链接</a>
          {/* 五、绑定href属性 注意尽量使用className 不要使用class 因为class是关键字 */}
          <div className={`app style ${isActive ? 'active' : ''}`}></div>
          {/* 六、绑定内联样式style属性 */}
          <div style={styleObject}>我是帅哥</div>
        </div>
      )
    }
  }
}

3.事件绑定

在事件执行，我们可能需要获取当前类的对象中的相关属性，这个时候需要用到this，但此时this为undefined，因为btnClick函数并不是我们主动调用的，是react内部调用btnClick函数，在内部调用时，this为隐式绑定，所以不知道this是指向哪里的。

三种解决方法：

方案一：bind给btnClick显示绑定this
方案二：使用 ES6 class fields 语法（箭头函数寻找上一层作用域）
方案三：事件监听时传入箭头函数（先传入一个箭头函数然后箭头函数返回一个调用绑定事件函数调用。原因：this.事件函数，是隐式绑定）

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      counter: 100
    }
    this.onClick1 = this.onClick1.bind(this)
  }
  onClick1() {
    this.setState({
      counter: 1000
    })
  }
  onClick2 = () => {
    this.setState({
      counter: 2000
    })
  }
  onClick3() {
    this.setState({
      counter: 3000
    })
  }
  render() {
    const { counter } = this.state
    return (
      <div>
        <h2>{counter}</h2>
        {/* 方案一：bind给btnClick显示绑定this */}
        <button onClick={this.onClick1}>方案一</button>
        {/* 方案二：使用 ES6 class fields 语法 */}
        <button onClick={this.onClick2}>方案二</button>
        {/* 方案三：事件监听时传入箭头函数  */}
        <button onClick={() => this.onClick3()}>方案三</button>
      </div>
    )
  }
}

4.事件参数传递

在执行函数时，有可能我们需要获取一些参数信息：例如event对象、其他参数。最好的方式就是传入一个箭头函数，主动执行事件函数，并且可以传入相关的其他参数。

class App extends React.Component {
  onClick1(e, name, age) {
    console.log(e, name, age)
  }
  render() {
    return (
      <div>
        <button onClick={(e) => this.onClick3(e, 'kk', 18)}>按钮</button>
      </div>
    )
  }
}

5.条件渲染

某些情况下，界面的内容会根据不同的情况显示不同的内容，或者决定是否渲染某部分内容：在vue中，我们会通过指令来控制：比如v-if、v-show；在React中， 所有的条件判断都和普通的JavaScript代码一致 ；

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      isShow: true
    }
  }
  changShow() {
    this.setState({
      isShow: !this.state.isShow
    })
  }
  render() {
    const { isShow } = this.state
    let showEl = null
    if (isShow) {
      showEl = <div>哈哈哈</div>
    } else {
      showEl = null
    }
    return (
      <div>
        <button onClick={() => this.changShow()}>切换</button>
         {/* 方案一：普通的if-else */}
         {showEl}
         {/* v-show的效果 */}
         <div style={{display: isShow ? 'block' : 'none'}}>666</div>
      </div>
    )
  }
}

6.列表渲染

在React中并没有像Vue模块语法中的v-for指令，展示列表最多的方式就是使用数组的 map高阶函数

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      movies: ['aaa', 'bbb', 'ccc']
    }
  }
  render() {
    return (
      <div>
        <ui>
          {this.state.movies.map(item => <li>{item}</li>)}
        </ui>
      </div>
    )
  }
}