当前位置:Gxlcms > JavaScript > JSX是什么?jsx使用方法介绍(附代码)

JSX是什么?jsx使用方法介绍(附代码)

时间:2021-07-01 10:21:17 帮助过:69人阅读

什么是jsx?jsx的用法又有哪些?本篇文章给大家带来的内容就是关于JSX是什么?jsx的使用方法介绍(附代码),接下来就来看一下具体的内容吧。

在react中,我们的页面内容就是通过JSX来编写,那么JSX到底是什么呢?JSX其实就是JavaScript对象,会构建创建一个js对象来描述HTML结构的信息。这里要记住JSX是js的一种扩展语言,类似HTML但是又不是HTML,因为JSX中还能进行运算,判断,加入一些js语言等。

jsx的使用之JSX中的运算

   render() {
      return(
        <div>
           <h2>算数题</h2>
           <ul>
             <li>5+6={5+6}</li>
             <li>6+6={6+6}</li>
             <li>10*10={10*10}</li>
           </ul>
        </div>
      )
    }

在JSX中是用 {} 来区分是HTML还是js的,也就是说,所有的js语言都得用 {} 括起来

jsx的使用之JSX中的变量

 render() {
      const flag = true;
      return(
        <div>
            {flag ? (<div>flag为真</div>) : (<div>flag为假</div>)}
        </div>
      )
    }

jsx的使用之JSX中的样式

在JSX中,给元素添加样式也是用style属性,但是style里面放的是一个样式对象,如下所示:

 render() {
      var newStyle = {
        background: 'blue',
        fontSize:'15px'
      }
      return(
        <div>
            <div style={{color: 'red'}}>颜色</div>
            <div style={newStyle}>样式</div>
        </div>
      )
    }

通过上述案例,我们可以知道JSX中,样式的属性名称得用驼峰命名

jsx的使用之JSX中的HTML标签

在JSX中,有些标签名称为了防止冲突得做一些转换:

  1. class得用className代替

  2. lable元素中的for属性,得用htmlFor代替,如下:

<label htmlFor="msg" ></label>

这里还要注意,JSX中的所有标签必须得是闭标签

相关推荐:

Vue如何支持JSX语法详解

JavaScript的React框架中的JSX语法学习入门教程_基础知识

关于 React 的详细介绍

以上就是JSX是什么?jsx使用方法介绍(附代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行