從零開始學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>
   				{this.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調用函數
   				{this.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組件，則需要創建一個大寫字母開頭的標籤