最全的react视频【黑马程序员】--第五章 JSX语法

1.JSX语法本质

2. 在JSX中混合写入js表达式

渲染类型

渲染数字

渲染字符串

渲染布尔值

为属性绑定值

渲染jsx元素

渲染 jsx元素的数组

将普通字符串数组转为jsx数组并渲染到页面上（两种方案）

3. react中key的作用

4. JSX语法注意事项

1.JSX语法本质

并不是直接把jsx渲染到页面上，而是内部转换成了createElement 形式，在渲染的；

ReactDOM.render(<div>123</div>, document.getElementById('app'))

上面的<div>123</div>是jsx语法，编译时会自动寻找第三方插件。

2. 在JSX中混合写入js表达式

在JSX语法中，要把js代码写到 { } 中
jsx代码中的HTML标签必须遵循XML规范，<hr/>标签需要闭合，必须是小写

渲染类型

渲染数字

index.js文件：

//1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'ReactDOM.render(<div>123</div>, document.getElementById('app'))

//1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'let a = 10
ReactDOM.render(<div>{a+5}</div>, document.getElementById('app'))

渲染字符串

//1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'let str = '你好，中国'
ReactDOM.render(<div>{str}
</div>, document.getElementById('app'))

渲染布尔值

{boo}不会在页面渲染，但不是报错；{boo.toString}会渲染出true;三目运算{boo?'真':'假'}可以渲染出真

//1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'let boo = true
ReactDOM.render(<div>{boo.toString()}<hr/>{boo ? '条件为真': '条件为假'}</div>, document.getElementById('app'))

为属性绑定值

<p title = {title}>p标签</p>不要写双引号

//1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'let title = '999'// 3. 使用render函数渲染 jsx xml 比 html 严格多了//总结：什么情况下需要使用 {} 呢？ 当我们需要在 JSX 控制的区域内，写JS表达式，则需要把 JS代码写到 {}中
ReactDOM.render(<div><p title="ooo">这是p标签</p><hr/><p title= {title}>这是第二个p标签</p></div>, document.getElementById('app'))

渲染jsx元素

//1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'const h1 = <h1>红红火火开开心心</h1>    //不要把它想象成标签，这是一个js对象// 3. 使用render函数渲染 jsx xml 比 html 严格多了//总结：什么情况下需要使用 {} 呢？ 当我们需要在 JSX 控制的区域内，写JS表达式，则需要把 JS代码写到 {}中
ReactDOM.render(<div>{h1}
</div>, document.getElementById('app'))

渲染 jsx元素的数组

//1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'const arr =[       // 与jsx元素数组，每一项看成一个对象<h2>这是h2</h2>,<h3>这是h3</h3>
]// 3. 使用render函数渲染 jsx xml 比 html 严格多了//总结：什么情况下需要使用 {} 呢？ 当我们需要在 JSX 控制的区域内，写JS表达式，则需要把 JS代码写到 {}中
ReactDOM.render(<div><hr/>{arr}</div>, document.getElementById('app'))

将普通字符串数组转为jsx数组并渲染到页面上（两种方案）

将字符串数组的每一项用标签包起来

方案一：在外部进行for循环：foreach

//1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'const h1 = <h1>红红火火开开心心</h1>    //不要把它想象成标签，这是一个js对象
const arr =[       // 与jsx元素数组，每一项看成一个对象<h2>这是h2</h2>,<h3>这是h3</h3>
]const arrStr = ['毛利兰','赫曼','张三']//定义一个空数组，将来用来存放 名称标签
const nameArr = []
arrStr.forEach(item =>{const temp = <h5>{item}</h5>nameArr.push(temp)
})// 3. 使用render函数渲染 jsx xml 比 html 严格多了//总结：什么情况下需要使用 {} 呢？ 当我们需要在 JSX 控制的区域内，写JS表达式，则需要把 JS代码写到 {}中
ReactDOM.render(<div>{arrStr}{nameArr}
</div>, document.getElementById('app'))

方法二：内部循环：map循环（与foreach的区别是，map有返回值，foreach没有返回值是对元素的每一项进行操作）

//1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'const h1 = <h1>红红火火开开心心</h1>    //不要把它想象成标签，这是一个js对象
const arr =[       // 与jsx元素数组，每一项看成一个对象<h2>这是h2</h2>,<h3>这是h3</h3>
]const arrStr = ['毛利兰','赫曼','张三']//定义一个空数组，将来用来存放 名称标签
//方案一：在外部进行for循环
const nameArr = []
arrStr.forEach(item =>{const temp = <h5>{item}</h5>nameArr.push(temp)
})// //数组的map方法
// const result = arrStr.map(item => {
//     return item + '~~'
// })
// console.log(result)//当map返回的只有一行时，可省略外面的大括号和return关键字
const result = arrStr.map(item => item + '~~')
console.log(result)// 3. 使用render函数渲染 jsx xml 比 html 严格多了//总结：什么情况下需要使用 {} 呢？ 当我们需要在 JSX 控制的区域内，写JS表达式，则需要把 JS代码写到 {}中
ReactDOM.render(<div> {arr}<hr/>{arrStr}<hr/>{nameArr}<hr/>{arrStr.map(item => {return <h5>{item}</h5>})}
</div>, document.getElementById('app'))

3. react中key的作用

上面，我们将数组中的每一个对象渲染到页面上时，出现警告：

在react中，需要把 key 添加给被 forEach 或者 map 或者 for 循环直接控制的元素 (最外层的元素），否者会有警告

const arrStr = ['英语','数学','地理','历史']
const namearr=[];
arrStr.forEach(item=>{const temp = <h5 key={item}>{item}</h5>;namearr.push(temp);
})

如果h5外面有一个div，则需要加给div

map函数使用：数组的map方法，map中必须写return

const arrStr = ['英语','数学','地理','历史']
const result= arrStr.map(item=>{return item+"~~";
})
console.log(result)

 {arrStr.map(item => {return <h5 key={item}>{item}</h5>})}

4. JSX语法注意事项

在JSX中写注释：，推荐使用{/*这是注释*/}，或者//
为JSX中的元素添加class类名：需要使用className代替class;htmlFor替换label中的for属性
在JSX常见DOM的时候，所有的节点，必须拥有唯一的根元素进行包裹
在JSX语法中，标签必须成对出现，如果是单标签，则必须自闭合

   <p className="myele">111111111</p><label htmlFor="ooo"></label>

a. 当编译引擎，在编译JSX代码的时候
b .如果遇到<那么就把它当做HTML代码去编译
c. 如果遇到了{}就把花括号内部的代码当做普通JS代码去编译

总的代码：index.js


import React from 'react'
import ReactDOM from 'react-dom'//import CmtList from './components/CmtList'
// import BindEvent from '@/components/BindEvent'let a=10;
let str = '你好，中国';
let boo=true;
let title='9999';
const h1=<h1>红红胡奥胡奥</h1>
const h2=[<h1>这是h1</h1>,<h2>这是h2</h2>]const arrStr = ['英语','数学','地理','历史']
//定义一个空数组，将用来
const namearr=[];
// const result= arrStr.map(item=>{
//   return item+"~~";
// })
// console.log(result)arrStr.forEach(item=>{const temp = <h5>{item}</h5>;namearr.push(temp);
})//3. 调用render函数渲染
ReactDOM.render(<div>
{a + 2}
<hr/>
{str}
<hr/>
{boo ? '条件真':'条件假'}
<hr/>
<p title={title}>这是p标签</p>
{h1}
<hr/>
{h2}
<hr/>
{namearr}
<hr/>
{arrStr.map(item=>{return <h3>{item}</h3>
})}s
</div>, document.getElementById('app'))