jsx语法-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>
        )

文章来源地址https://www.toymoban.com/news/detail-607212.html

到了这里，关于jsx语法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！