最全的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'))