开发者学堂课程【React 入门与实战：将普通字符串数组，转为 jsx 数组并渲染到页面上】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8085
将普通字符串数组，转为 jsx 数组并渲染到页面上
一、将普通字符串数组，转为 jsx 数组并渲染到页面上的两种方式和实际操作
将字符串数组的每一项用标签包起来
方案1：手动在外部进行 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 = ['毛利兰','柯南','小五郎',’灰原哀’]
//循环里面的每一项名称，将每一项名称用一个标签将其包起来
//这是一个普通的数组
//将这四个字符串名称都放到一个 h5 标签中，然后渲染到页面上
//定义一个空数组，将来用来存放名称标签
const nameArr = []
arrStr.forEach(item =>{ //item代表每一项
const temp = <h5>{item}</h5>
//将每一项名称包裹到 h5 中
nameArr.push(temp)
})
// 3. 使用 render 函数渲染 jsx xml 比 html 严格多了
//总结：什么情况下需要使用 {} 呢？ 当我们需要在 JSX 控制的区域内，写 JS 表达式，则需要把 JS 代码写到 {}中
ReactDOM.render(<div>
{arrStr}
{nameArr}
</div>, document.getElementById('app'))
如果直接把字符串放到页面上，则会出现如下效果：
只会出现4个字符串，没有意义。需要将每个名称都用 h5 包裹起来。
如果将4个字符串用 h5 包起来再放到页面上，将会呈现如下效果：
方案2：内部循环：map 循环
作用：遍历数组中的每一项，根据这一项，生成一个新的数组返回
区别：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 + '~~'
// map 中必须有 return，如果没有 return 则没有返回值
// })
// 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 => {
//对数组中的每一项做一个 map 循环
return <h5>{item}</h5>
//无论是 foreach 还是 map 方法，最终需要返回一个数组，里面包含4个 h5 标签
// map 返回的是一个完整的数组
})}
</div>, document.getElementById('app'))
使用 map 函数的返回值，如下：
//每一项都带有“~~”，map 对数组中的每一项做一个指定的操作，并且把指定的操作结果当做新数组里的元素并返回，最终 map 返回的结果是一个新数组。
使用 map 函数，返回完整的数组：
(arrStr.map(item => <h3>(item)</h3>))}
//还是之前的四项
