React学习笔记（二）—— jsx语法最基本使用

1. 基本

ReactDOM.render(<h3>h3</h3>, document.getElementById('app'))

2. 变量

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

3. 变量计算

let a=10;
ReactDOM.render(<h3>{a+2}</h3>, document.getElementById('app'))

4. 字符串

let a=10,str="你好";
ReactDOM.render(<h3>
	{a+2}
	<hr/>
	{str}
</h3>, document.getElementById('app'))

5. 布尔

let a=10,str="你好",boo=true;
ReactDOM.render(<h3>
	{a+2}
	<hr/>
	{str}
	<hr/>
	{boo.toString()}
</h3>, document.getElementById('app'))

6. 三元表达式

let a=10,str="你好",boo=true;
ReactDOM.render(<h3>
   {a+2}
   <hr/>
   {str}
   <hr/>
   {boo? '条件为真' : '条件为假'}
</h3>, document.getElementById('app'))

7. 属性绑定

let title="999";
ReactDOM.render(<h3>
    <p title={title}>ddd</p>  
</h3>, document.getElementById('app'))

8. 元素绑定

const h5=<h5>nihao</h5>
ReactDOM.render(<h3>
    {h5} 
</h3>, document.getElementById('app'))

9. 元素数组绑定

const arr=[
    <h3>这是h3</h3>,
    <h4>这是h4</h4>,
    <h5>这是h5</h5>,
]
ReactDOM.render(<h3>
    {arr} 
</h3>, document.getElementById('app'))

10. 将普通字符串数组转换为jsx数组，并渲染到页面上

• 方案一：

const arrStr=['nihao','nibuhao','nihao2','nibuhao2']
// 定义一个空数组
const nameArr=[]
arrStr.forEach((item)=>{
   const temp= <h5>{item}</h5>
   nameArr.push(temp)
})
ReactDOM.render(<h3>
    {nameArr} 
</h3>, document.getElementById('app'))

• 方案二：

const arrStr=['nihao','nibuhao','nihao2','nibuhao2']
ReactDOM.render(<h3>
    {arrStr.map(item => <h5>{item}</h5>)} 
</h3>, document.getElementById('app'))

const arrStr=['nihao','nibuhao','nihao2','nibuhao2']
ReactDOM.render(<h3>
    {arrStr.map((item)=> {
   	return  <h5>{item}</h5>
    })} 
</h3>, document.getElementById('app'))

11. 元素中用class属性，必须用className代替class；label标签中for属性必须用htmlFor代替for；标签必须成对出现（双标签） 或者 单标签必须自闭合
12. 在jsx创建DOM的时候，所有的节点必须有唯一的根元素进行包裹
13. 在jsx中写注释：推荐使用{/* 这是注释 */}