将普通字符串数组，转为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>))}
//还是之前的四项
