JSX语法

1.JSX语法的本质：并不是直接把jsx渲染到页面上，而是内部先转换成了createElement形式再进行渲染的

2.在jsx中混合写入js表达式：在jsx语法中，要把js代码写到{ }中

渲染数字	let a = 10; ReactDOM.render(<div>{a}</div>,document.getElementById('app'));
渲染字符串	let str = '你好，中国'; ReactDOM.render(<div>{str}</div>,document.getElementById('app'));
渲染布尔值	let boo = true; ReactDOM.render(<div>{boo ? '条件为真' : '条件为假'}</div>,document.getElementById('app'));
为属性绑定值	let title = '999'; ReactDOM.render(<div><p title={title}>这是一个p标签</p></div>,document.getElementById('app'));
渲染jsx元素	const h1 = <h1>哈哈哈哈哈哈哈</h1>; ReactDOM.render(<div>{h1}</div>,document.getElementById('app'));
渲染jsx元素数组	const arr = [<h2>这是h2</h2>,<h3>这是h3</h3>]; ReactDOM.render(<div>{arr}</div>,document.getElementById('app'));
将普通字符串数组，转为jsx数组并 渲染到页面上（两种方案）	const arrStr = ['毛利兰','柯南','小五郎','灰原哀']; //定义一个空数组，将来用来存放名称标签 const nameArr = []; //注意：react中需要把key添加给被forEach或map循环直接控制的元素 arrStr.forEach(item => { const temp = <h5 key={item}>{item}</h5>; nameArr.push(temp); }); ReactDOM.render(<div>{nameArr}</div>,document.getElementById('app'));
	const arrStr = ['毛利兰','柯南','小五郎','灰原哀']; //直接在jsx里面循环，数组map方法也是遍历数组的每一项，并生成一个新的数组返回，注意：map中必须要写return ReactDOM.render(<div>{arrStr.map(item => { return <h3 key={item}>{item}</h3> })}</div>,document.getElementById('app'));

3.在jsx中写注释：有两种方法

//第一种注释（推荐使用）:{/* */}
{/*{arr}*/}

//第二种注释：
{
     //这里是注释的内容  
}

4.为jsx中的元素添加class类名：需要使用className来代替class；htmlFor替换label的for属性

<p className="myele">!!!!!</p>
<label htmlFor="ooo">1111</label>