从零开始学React(3)——简单介绍JSX语法糖

简单介绍jsx语法糖

1. JSX不能直接运行，是被babel-loader中的React这个preset翻译的
   翻译前

   class App extends React.Component{
       render(){
           return <h1>Hello World!</h1>
       }
   }
   

   翻译后
   

2. 需注意事项：
   ①需要被一个单独的标签包裹，例如div或者section，以下代码就是错误的

       render(){
    		return <h1>Hello World!</h1><h2>Hello World!</h2>
       }
   

   改正后(因有多行，防止换行后被return自动添加分号致使返回错误，此处添加分号)：

   return (
   		<div>
   			<h1>Hello World!</h1>
   			<h2>Hello World!</h2>
   		</div>
   	)
   

   ②标签必须封闭
   ③class要写成className，for要写成htmlFor
   错误演示：

   return(
      <div class="buttonGroup"></div>
   )
   

   改正后：

   return(
   	<div className="buttonGroup"></div>
   )
   

   ④HTML注释不能使用，只能使用js注释

3. JSX中可以用{}来表示临时插入一个简单的js表达式，不能是if、for等复杂结构，可以是&&、||短路语法

4. 原生标签比如p、li、div中，如果要使用自定义属性，必须使用data-前缀，例如

   return(
   	<div data-userUin="12312"></div>
   )
   

   但如果是自定义标签，则可随意自定义属性

5. JSX表达式用{}包裹，在JSX中不能使用if else 语句，但可以使用三元运算表达式来替代

6. 可运行函数

   class App extends React.Compontent{
   	returnH1(){
   		return(
   			<h1>这里是返回的h1标签</h1>		
   		)
   	}
   	render(){
   		return(
   			<div>
   				<h1>Hello World!<h1>
   				{returnH1()}
   			</div>
   		)
   	}
   }
   

   虽然JSX中不可以使用if else语句，但是可以在函数中使用

   class App extends React.Compontent{
   	//定义一个函数，接收一个参数
   	returnH1(name){
   		if(name == 'dev'){
   			return(
   				<h1>正在开发中</h1>		
   			)
   		}else if(name == 'test'){
   			return(
   				<h1>正在测试中</h1>
   			)
   		}			
   	}
   	render(){
   		return(
   			<div>
   				<h1>Hello World!<h1>
   				//此处是JSX调用函数
   				{returnH1(dev)}
   			</div>
   		)
   	}
   }
   

7. JSX可以设置样式，格式如下

   class App extends React.Compontent{
   	let styleObj={
   		"width":"100px",
   		"height":"100px"
   	}
   	render(){
   		<div>
   			<div style={{"width":"100px","height":40 + 60 + "px","backgroundColor":"red"}}></div>
   			<div style={styleObj}></div>
   		</div>
   	}
   }
   

8. JSX允许直接使用数组，如果数组中是JSX语法的话，会被自动展开，并不需要v-for或ng-repeat这样的指令展开数组

   class App extends React.Compontent{
   	//此处定义一个数组，React要求定义只要是遍历数组中的JSX，都需要有不重复的key属性
   	let arr=['html','css','js'].map(item,index){//但此处并不推荐使用index
   		return <li key = {index}>{item}</li>
   	}
   	render(){
   		<ul>{arr}</ul>
   	}
   }
   

9. React中可以渲染HTML标签以及React组件，渲染的是原生的html标签的话，需要使用全小写的标签名，耳如果要渲染React组件，则需要创建一个大写字母开头的标签