react（4）在jsx中书写js代码

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

let a = 10
let str = 'Hello world'
let boo = false
let title = '123'
const h1 = <h1>456</h1>
const arr = [
	<h2>h2</h2>,
	<h3>h3</h3>
]
const arrStr = ['a', 'b', 'c', 'd']
// 没意义之后的修改
// 方案一：定义一个空数组，用来存放名称和标签
// react 中，需要把key添加给被forEach或map或for循环直接控制的元素
const nameArr = []
arrStr.forEach(item => {
	const temp = <h5 key={item}>{item}</h5>
	nameArr.push(temp)
})
// 方案二：数组的map方法
// const result = arrStr.map(item =>{
//   return item + ',' 
//  })


// 当我们需要在jsx控制的区域内写js表达式时需要把js代码写到{}中


ReactDOM.render(<div>
{a +2}
{str}
{boo ? '1' : '2'}
<p title = {title}> 这是P标签</p>
{h1}
{arr}
// {arrStr} //abcd,挨着放一块了，字符串数组就没意义了
{nameArr}
{arrStr.map(item => {<h3 key = {item}>{item}</h3>})}
<p className = "mystyle">0987</p> //className而不是class
<label htmlFor = "556565">332333</label> // htmlFor 而不是for
</div>,document.getElementById('app')