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

基本使用

书写规范

    // 1.jsx结构中只能有一个根元素
    // 2.jsx结构通常会包裹一个(), 将整个jsx当做一个整体, 实现换行
    // 3.jsx可以是单标签, 也可以双标签, 但是单标签必须以/>结尾

    return (
      <div>
        <div>
          <h2>{message}</h2>
          <br/>
        </div>
        <div>哈哈哈</div>
      </div>
    )

注释

     { /* JSX的注释写法 */ }
     <h2>{message}</h2>

JSX嵌入变量作为子元素

• 当变量是Number、String、Array类型时，可以直接显示

• 当变量是null、undefined、Boolean类型时，内容为空

  要显示null、undefined、Boolean，那么需要转成字符串。 转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；

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

        this.state = {
          counter: 100,
          message: "Hello World",
          names: ["abc", "cba", "nba"],

          aaa: undefined,
          bbb: null,
          ccc: true,

          friend: { name: "kobe" },
        }
        
        render() {
        // 1.插入标识符
        const { message, names, counter } = this.state
        const { aaa, bbb, ccc } = this.state
        const { friend } = this.state

        // 2.对内容进行运算后显示(插入表示)
        const { firstName, lastName } = this.state
        const fullName = firstName + " " + lastName
        const { age } = this.state
        const ageText = age >= 18 ? "成年人": "未成年人"
        const liEls = this.state.movies.map(movie => <li>{movie}</li>)

        // 3.返回jsx的内容
        return (
          <div>
            {/* 1.Number/String/Array直接显示出来 */}
            <h2>{counter}</h2>
            <h2>{message}</h2>
            <h2>{names}</h2>

            {/* 2.undefined/null/Boolean */}
            <h2>{String(aaa)}</h2>
            <h2>{bbb + ""}</h2>
            <h2>{ccc.toString()}</h2>

            {/* 3.Object类型不能作为子元素进行显示*/}
            <h2>{friend.name}</h2>
            <h2>{Object.keys(friend)[0]}</h2>
          </div>
        )
      }

JSX嵌入表达式

• 运算表达式

• 三元运算符

• 执行一个函数

       //数据
       this.state = {
          firstName: "kobe",
          lastName: "bryant",

          age: 20,

          movies: ["流浪地球", "星际穿越", "独行月球"]
        }
        
        {/* 4.可以插入对应的表达式*/}
        <h2>{10 + 20}</h2>
        <h2>{firstName + " " + lastName}</h2>
        <h2>{fullName}</h2>

        {/* 5.可以插入三元运算符*/}
        <h2>{ageText}</h2>
        <h2>{age >= 18 ? "成年人": "未成年人"}</h2>

        {/* 6.可以调用方法获取结果*/}
        <ul>{liEls}</ul>
        <ul>{this.state.movies.map(movie => <li>{movie}</li>)}</ul>
        <ul>{this.getMovieEls()}</ul>
        
       getMovieEls() {
        const liEls = this.state.movies.map(movie => <li>{movie}</li>)
        return liEls
      }

jsx绑定属性

        this.state = {
          title: "哈哈哈",
          imgURL: "https://ts1.cn.mm.bing.net/th/id/R-C.95bc299c3f1f0e69b9eb1d0772b14a98?rik=W5QLhXiERW4nLQ&riu=http%3a%2f%2f20178405.s21i.faiusr.com%2f2%2fABUIABACGAAgoeLO-wUo4I3o2gEw8Qs4uAg.jpg&ehk=N7Bxe9nqM08w4evC2kK6yyC%2bxIWTjdd6HgXsQYPbMj0%3d&risl=&pid=ImgRaw&r=0",
          href: "https://www.baidu.com",

          isActive: true,
          objStyle: {color: "red", fontSize: "30px"}
        }
        
        render() {
        const { title, imgURL, href, isActive, objStyle } = this.state

        // 需求: isActive: true -> active
        // 1.class绑定的写法一: 字符串的拼接
        const className = `abc cba ${isActive ? 'active': ''}`
        // 2.class绑定的写法二: 将所有的class放到数组中
        const classList = ["abc", "cba"]
        if (isActive) classList.push("active")
        // 3.class绑定的写法三: 第三方库classnames -> npm install classnames

        return (
          <div>
            { /* 1.基本属性绑定 */ }
            <h2 title={title}>我是h2元素</h2>
            {/*<img src={imgURL} alt=""/>*/}
            <a href={href}>百度一下</a>

            
            { /* 2.绑定class属性: 最好使用className */ }
            <h2 className={className}>哈哈哈哈</h2>
            <h2 className={classList.join(" ")}>哈哈哈哈</h2>

            
            { /* 3.绑定style属性: 绑定对象类型 */ }
            <h2 style={{color: "red", fontSize: "30px"}}>呵呵呵呵</h2>
            <h2 style={objStyle}>呵呵呵呵</h2>
          </div>
        )
      }