jsx语法

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>
        )

 

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