React-jsx语法-蒲公英云

React-jsx语法

jsx语法是 react 的模板语法，是 react 的灵魂；通过该语法可以很方便的创建 react 对象

jsx 不是字符串也不是 html，就是 react 对象，其底层就是 React.createElement()；所以使用 jsx 语法时还是要引入 react 核心包

jsx 只能有一个根节点；所以多个根节点时要再用一个元素将其包起来或者使用 <> </> 将其包裹，作用就相当于小程序中的 <block></block>

当 jsx 代码块比较复杂时，建议使用 () 将其包裹

示例：

// 引入包
import React from 'react'
import ReactDOM from 'react-dom'
// 定义结构
let el = (
  <div>
    <h1>熊大</h1>
    <h1>熊二</h1>
    <h1>翠花</h1>
  </div>
)
// 渲染到指定容器中
ReactDOM.render(el, document.getElementById('root'))

在这里插入图片描述

jsx 中元素的 clsss 属性不能使用直接使用，因为 class 在 react 中已经被作为类组件使用了，所以需要使用 className 为元素添加类名。

jsx 中写注释内容、使用表达式、调用方法等操作要使用 {} 花括号包裹。

示例：

import React from 'react'
import ReactDOM from 'react-dom'
let uname = "香香", flag = false
let el = (
  <div>
    { /* 注释内容要用花括号包裹，不能直接写注释 */}
    <h1>大熊</h1>
    { /* 使用变量 */}
    <h1 className="ht">{ uname}</h1>
    { /* 使用表达式 */}
    <h1>{ flag ? '二熊' : '翠花'}</h1>
    { /* 使用方法 */}
    <h1>{ [1, 3, 9].join('-')}</h1>
  </div>
)
ReactDOM.render(el, document.getElementById('root'))