JSX语法
什么是JSX语法:就是符合 xml 规范的 JS 语法;(语法格式相对来说,要比HTML严谨很多)
报错:You may need an appropriate loader to handle this file type.
-
jsx 语法的本质:并不是直接把 jsx 渲染到页面上,而是 内部先转换成了 createElement 形式,再渲染的;
-
在 jsx 中混合写入 js 表达式:在 jsx 语法中,要把 JS代码写到
{ }
中-
渲染数字
-
渲染字符串
-
渲染布尔值
-
为属性绑定值
-
渲染jsx元素
-
渲染jsx元素数组
-
将普通字符串数组,转为jsx数组并渲染到页面上【两种方案】
-
forEach()
let knarr = ['小兰','柯南','小五郎'] let nameArr = [] knarr.forEach(item=>{ var myh5 = <h5>{item}</h5> nameArr.push(myh5) })
-
map
let knarr = ['小兰','柯南','小五郎'] {knarr.map(item=> <h5>{item}</h5>)}
-
-
-
在 jsx 中 写注释:推荐使用
{ /* 这是注释 */ }
-
为 jsx 中的元素添加class类名:需要使用
className
来替代class
;htmlFor
替换label的for
属性 -
在JSX创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹;
-
在 jsx 语法中,标签必须 成对出现,如果是单标签,则必须自闭和!
当 编译引擎,在编译JSX代码的时候,如果遇到了
<
那么就把它当作 HTML代码去编译,如果遇到了{}
就把 花括号内部的代码当作 普通JS代码去编译;
import React from 'react'
import ReactDOM from 'react-dom'
// 创建虚拟dom
// const mydiv = React.createElement('div',{title:'div_title',id:1},'你好啊')
//jsx语法
// const mydiv = <div id='1'>
// <h1>你好啊div</h1>
// </div>
// // 渲染
// ReactDOM.render(mydiv,document.getElementById('app'))
let a = '113'
let b = 113
let str = "我爱你中国"
let boo = true
let title = "999"
// 什么情况下需用{} ? 当我们想要在jsx区域内写js表达式就用{}
let h1 = <h1>这是h1标签</h1>
let arr = [<h2>这是h2标签</h2>,<h3>这是h3标签</h3>]
let knarr = ['小兰','柯南','小五郎']
let nameArr = []
knarr.forEach(item=>{
var myh5 = <h5>{item}</h5>
nameArr.push(myh5)
})
let mydiv = <div>
{a+3}
{b+3}
{str}
{boo ? '真':'假'}
<p title={title}>这是p</p>
{h1}
{arr}
<hr/>
{nameArr}
{knarr.map(item=> <h5>{item}</h5>)}
</div>
ReactDOM.render(mydiv,document.getElementById('app'))