至今头条

jsx语法

2023-07-27 15:15 由 guorunbin 发表于 #前端开发

JSX语法

 JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法；

 它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用；

 它不同于Vue中的模块语法，你不需要专门学习模块语法中的一些指令（比如v-for、v-if、v-else、v-bind）；

const element=<h2>{message}</h2>

👀 JSX的书写规范：

 JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素（或者使用后面我们学习的Fragment）；

 为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写；

 JSX中的标签可以是单标签，也可以是双标签；

✓ 注意：如果是单标签，必须以/>结尾；

jsx里面的注释

{/*  */}

◼ JSX嵌入变量作为子元素

 情况一：当变量是Number、String、Array类型时，可以直接显示

 情况二：当变量是null、undefined、Boolean类型时，内容为空；

✓ 如果希望可以显示null、undefined、Boolean，那么需要转成字符串；

✓ 转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；

 情况三：Object对象类型不能作为子元素（not valid as a React child）

◼ JSX嵌入表达式

 运算表达式

 三元运算符

 执行一个函数

<h2>{10+20}</h2>
<h2>{age>=18? "成年人":"未成年人"}</h2>
const liels=movies.map(movie=><li>{movie}</li>)
getmoviels(){
        const liels=this.state.movies.map(movie=><li>{movie}</li>)
        return liels
      }
      <h2>{this.getmoviels()}</h2>

事件绑定

//this绑定的三种方法
1、this.btnclick=this.btnclick.bind(this)
2、btn3click=()=>{
        console.log(this)
      }
3、先定义函数
btn3click(){
        console.log(this)
      }
   <button onClick={()=>this.btn3click()}>1</button>//使用隐式绑定

多个参数传递

btnclick(event,name,age){
      console.log("btnclick",event,this)
      console.log(name,age)
      }
//第一种
<button onClick={this.btnclick.bind(this,"boke",20)}>2</button>
//第二种
<button onClick={(event)=>this.btnclick(event,"grb",21)}>3</button>

条件渲染

在vue中，我们会通过指令来控制：比如v-if、v-show；

 在React中，所有的条件判断都和普通的JavaScript代码一致；

◼ 常见的条件渲染的方式有哪些呢？

◼ 方式一：条件判断语句

 适合逻辑较多的情况

◼ 方式二：三元运算符

 适合逻辑比较简单

◼ 方式三：与运算符&&

 适合如果条件成立，渲染某一个组件；如果条件不成立，什么内容也不渲染；

◼ v-show的效果

 主要是控制display属性是否为none

const {isready}=this.state
        let showelent=null
        if(isready){
         showelent= <h2>开始</h2>
        }else{
         showelent= <h1>结束</h1>
        }
        return(
          <div>
            {showelent}
          </div>
        )

 

热门相关：恭喜你被逮捕了   神算大小姐   闺范   闺范   情事两姐妹