React学习之旅Part3：React中JSX语法的使用(渲染数字、渲染字符串、渲染布尔值、为属性绑定值、渲染JSX元素、渲染JSX元素数组、将普通字符串数组转换为JSX数组并渲染)及注意事项

JSX语法可以：

• 渲染数字
• 渲染字符串
• 渲染布尔值
• 为属性绑定值
• 渲染JSX元素
• 渲染JSX元素数组
• 将普通字符串数组转换为JSX数组并渲染

可直接将标签放入render()方法中：
该标签经过Babel的转换后不是一个HTML标签了 而是一个对象

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<div>我是帅哥</div>,document.getElementById("app"))

在JSX语法中 使用花括号{}进行占位：

(类似于Vue的插值表达式)

1、渲染数字

let a=10;
ReactDOM.render(<div>{a}</div>,document.getElementById("app"))

在花括号内 还可进行基本表达式运算
比如：

let a=10;
ReactDOM.render(<div>{a+12}</div>,document.getElementById("app"))

2、渲染字符串

let str='我是帅哥'
ReactDOM.render(<div>{str}</div>,document.getElementById("app"))

3、渲染布尔值

let flag=true
ReactDOM.render(<div>{flag?'真':'假'}</div>,document.getElementById("app"))

4、为属性绑定值

let title="我是标题"
ReactDOM.render(<p title={title}>ppp</p>,document.getElementById("app"))

5、渲染JSX元素

const h1=<h1>我是h1</h1>
ReactDOM.render(<div>{h1}</div>,document.getElementById("app"))

6、渲染JSX元素数组

const arr=[
    <h2 key="2">我是h2</h2>,
    <h3 key="3">我是h3</h3>
]
ReactDOM.render(<div>{arr}</div>,document.getElementById("app"))

7、将普通字符串数组转换为JSX数组并渲染

在循环数组的时候 必须添加key属性 以固定数组中每一项的状态
React的key属性和Vue的key属性的效果是一样的
该key属性必须为唯一值(unique) 以区分每一项

在React中 需将key添加给被forEach或map或for循环【直接】控制的元素
例如：

<h3 key={item.id}>{item}</h3>

<div key={item.id}>
	<h3>{item}</h3>
</div>

方式一：

const strArr=['陈涛','王涛','张涛','林涛']

const nameArr=[]
strArr.forEach(item => {
    const temp=<h5 key={item}>{item}</h5>
    nameArr.push(temp)
})

ReactDOM.render(<h2>{nameArr}</h2>,document.getElementById("app"))

方式二：

const strArr=['陈涛','王涛','张涛','林涛']

ReactDOM.render(<div>{strArr.map(item => <h3 key={item}>{item}</h3>)}</div>,document.getElementById("app"))

---

注意事项：

1、JSX的语法很严格 所有的标签必须闭合
<hr/>不能写成<hr>

2、JSX采用的是JS的注释方式 形如/* */ 或 //
且由于是JSX语法 需写在花括号内部 像这样：

{/*我是注释*/}

或

{
	// 我是注释
}

3、在为JSX语法的元素添加类名(class)的时候
用className来替代class
用htmlFor来替代for
class和for是JS中的关键字 为了防止歧义 在JSX中必须换个关键字

4、在JSX语法中 创建DOM的时候 所有节点必须有唯一的根元素进行包裹
就像Vue的<template>里面一样 必须有唯一的根元素进行包裹 不能有多个平级的根元素

---