「最簡教程」每天一篇，輕松搞定 React-JSX篇

看本篇之前建議先看概述篇。
————致力于最簡單的前端教程，每天一篇文章，輕松進階前端

JSX概念

jsx簡單的理解就是在js里寫html。

它是react對js的語法擴展，雖然長的跟html一樣，但實際并不是，你可以把它看出一個對象（編譯后才是對象）。

比如上篇的例子，直接在js里定義了一個變量，值是一個html標簽：

const hello=<h1>Hello, world!</h1>;

JSX的使用

使用jsx前需要在文件中導入 React:

import React from 'react';

1. 表達式

jsx不僅僅是可以在js寫html，html里也可以嵌套表達式，規定嵌套在{}里面。

let name='world';
const hello=<h1>Hello, {name}!</h1>;
//<h1>Hello, world!</h1>

2. 屬性

jsx屬性就像html里的屬性一樣，可以是原有的，也可以自定義屬性。

const link=<a url='www.toutiao.com' urlName=''></a>

上面例子的url屬性就是原來html的屬性，urlName是我們自己添加的屬性。

3. 嵌套

jsx最外層只有一個標簽，但內部可以嵌套多層。

const element=(
 <div>
 <h1>Hello!</h1>
 <h2>Good to see you here.</h2>
 </div>
);

JSX注意事項

1. 使用 () 包裹html標簽

上面的例子，div外層用括號包裹，主要為了解決自動加分號可能引入的bug

2. jsx內寫注釋

類似html的注釋，但是需要放在{}里面

const element=(
 <div> 
 {/*注釋...*/}
 <h1>Hello!</h1>
 <h2>Good to see you here.</h2>
 </div>
);

JSX優點

可復用，html模塊化，可以復制給js變量，自然可以復用
防止xss攻擊
React DOM在渲染前會把內容轉換為字符串，所以可以防止xss攻擊（對xss有興趣的以后會單獨講）
標簽語義化
比如上面的element例子，可以把它當做一個標簽使用，不限于html里的標簽，div，p等等

JSX原理（了解）

實際上JSX是js（es6）的語法糖，JSX會在編譯時轉被 React.createElement() 調用，生成一個普通的js對象，下面兩種寫法完全等價：

const element=(
 <h1 className="greeting">
 Hello, world!
 </h1>
 );

const element=React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
 );

上手試一試吧

按照上面講的例子，進入創建的項目代碼目錄，找到App.js，如下：

項目目錄截圖

然后把App.js中render函數里的內容修改為本篇文章的代碼：

修改后截圖

讓我們切到瀏覽器看看效果：

瀏覽器截圖

本篇文章到此結束，下篇具體說說JSX的屬性。

【提示，關注后就能收到文章更新推送了】

【前方霧大，關注一下不迷路=。=】

【html】【css】【html】【css】【html】【javascript】【html】【javascript】【javacsript】【css】【javascript】【css】【javascript】

擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

從寫React項目開始，我們熟悉了一種語法，叫JSX，它很好的將邏輯和模板融合在一起。當然，有一點我們應該很清楚，在React項目開發的時候，我們可以使用JSX來編寫代碼，也可以使用純JavaScript來編寫代碼，這樣的話，即使不學JSX也可以正常開發React項目。

然而，facebook官方推薦我們使用JSX來寫React代碼。為什么呢？下面從四個方面介紹，帶你學會使用JSX。

一、JSX如何區分React組件和HTML標簽

HTML類型的標簽第一個字母用小寫來表示，React組件標簽第一個字母用大寫來表示。

比如：

上面代碼是一個HTML類型的標簽定義，需要知道兩點：

第一，當一個標簽里面內容為空的時候，可以直接使用自閉和標簽;

第二，因為JSX本身是JavaScript語法，所以一些JavaScript中的保留字要用其他的方式書寫，就像上面class要寫成className。

這里寫的是一個React組件，注意名字第一個字母大寫。

二、JSX中JavaScript表達式如何定義

標簽對標簽（或組件名），{}對JS代碼，無屬性默認為true

什么意思了？就是說在JSX語法中，當遇到標簽的時候就解釋成組件或HTML標簽，當遇到{}包裹的時候就當成JavaScript代碼來執行。

比如：

上面代碼中，{}內會當表達式處理，isLoggIn為true時輸出組件<Nav/>否則輸出<LoginForm/>

當省略一個屬性的值的時候，如<Nav isDisable/>。JSX會自動把它的值認為是true（isDisable=true）。

三、JSX注釋如何寫

在子組件中寫注釋的時候要用{}

比如：

四、多屬性如何定義

用“三點”操作符來簡化多個屬性的編寫。舉個例子：

顯然，上面這種寫法，當出現更多屬性的時候，會顯得很難看。下面看一個更優雅的寫法。

言

React框架推薦使用的DOM語法格式為JSX語法，屬于一種JavaScript擴展，React使用JSX來描述用戶界面。我們可以粗略的認為JSX是JavaScript和HTML的結合，但是在實際的使用過程中還有一定的細節區別。本文就帶領大家系統的學習JSX語法的格式。

一、JSX語法的基本用法

1、使用變量定義JSX元素

const element=<div>你好，React！</div>;

這里需要注意，上述代碼不是JavaScript字符串，所以沒有用任何引號引住；也不是HTML代碼。而是JSX語法格式。

React應用的最小單位是“元素”，JSX語法格式就是React推薦用來聲明元素的。

2、使用變量定義嵌套的JSX元素

對于相互嵌套的JSX元素，JSX語法推薦使用()擴住。

const ulElement=(
  <ul>
    <li>第一名</li>
    <li>第二名</li>
  </ul>
)

使用()擴住嵌套的JSX元素，讓格式更加清晰。從實際的操作來看，不書寫()也是可以的。

3、在JSX元素中使用變量

在JSX元素中使用變量必須使用{}擴住，變量可以用于JSX元素的內容中，也可以用于JSX元素的HTML屬性取值上。

let name='張三';
const strongElement=<strong>你好，{name}</strong>

let url='https://www.baidu.com';
const link=<a href={url}>百度一下</a>

4、在JSX元素中調用函數

對于具有return返回值的函數，JSX元素可以像使用變量一樣，利用{}擴住對函數進行調用。

function getSum(a,b){
  return a+b;
}
let a=10,b=20;
const sum=<div>{a}+{b}={getSum(a,b)}</div>

上述幾種情況中舉的案例元素（element、ulEelement、strongElement、link、sum）都可以直接用在ReactDOM。render()方法的第一個參數中，充當向第二個參數所指的DOM節點中放入的元素。以sum為例，代碼如下所示。

ReactDOM.render(
    sum,
    document.querySelector('#app')
);

二、JSX元素的語法規定

JSX元素在書寫時還要注意下列語法規定：

JSX元素必須具備一個唯一的根節點。
JSX元素中標記的class屬性取值必須使用className屬性。
JSX元素中標記的style屬性取值必須用兩個大括號擴住，即style={{}}。
JSX代碼中標記內部的注釋必須用{}擴住，標記外部的注釋不能用{}擴住。
JSX代碼中的標記必須成對或者有結尾標識。

請大家仔細閱讀下列代碼：

const element=(
  /*一個完整的JSX元素：本注釋沒有在任何標記內部，所以不用{}擴住*/
  <div>       {/*唯一的根節點：本注釋在標記內部，必須用{}擴住*/}
    <div className="top">   {/*className屬性的使用*/}
      {/*style屬性的使用必須是雙大括號*/}
      <div style={{width:'1200px',height:'40px',backgroundColor:'#3385ff'}}>
        歡迎學習React框架。
        <img src=”images/01.jpg” />    {/*標記必須有結尾標識*/}
      </div>
    </div>
  </div>
);
ReactDOM.render(
  element,
  document.querySelector('#app')
);

上述代碼在瀏覽器中運行，可以從開發人員工具的Elements選項卡中看到下列如圖所示的結構。

從圖中可以看得出，id屬性取值為app的div和class屬性取值為top的div之間，有一個空的div。這是由于為了滿足JSX元素必須具備一個唯一的根節點，而設置的最外層的div標記對。為了不讓最外層的根節點顯示在DOM結構中，React建議使用React.Fragment作為所有JSX元素最外層的根節點。代碼改為如下格式。

const element=(
  /*一個完整的JSX元素：本注釋沒有在任何標記內部，所以不用{}擴住*/
  <React.Fragment>       {/*唯一的根節點：本注釋在標記內部，必須用{}擴住*/}
    <div className="top">   {/*className屬性的使用*/}
      {/*style屬性的使用必須是雙大括號*/}
      <div style={{width:'1200px',height:'40px',backgroundColor:'#3385ff'}}>
        歡迎學習React框架。
        <img src=”images/01.jpg” />    {/*標記必須有結尾標識*/}
      </div>
    </div>
  </ React.Fragment >
);

這時再看開發人員工具的Elements選項卡，React.Fragment標記位置是沒有任何標記對的。

三、在JSX格式中遍歷數組

在JSX格式中遍歷數組不能使用for循環，只能使用ES5為數組提供的各種方法。下面的例子展示了用數組的map()方法來遍歷數組的功能實現。

例1：實現頁面導航條的JSX格式。

let navText=['首頁','產品展示','技術展望','視頻會議','金牌團隊','關于我們'];
let navLink=['index.html','product.html','technology.html','videol.html','team.html','about.html'];
const nav=(
  <React.Fragment>
    <div className="top">
      <div className="topContent">
        <ul>
          {
            navText.map((item,index)=>{
              return <li key={index}><a href={navLink[index]}>{item}</a></li>
            })
          }
        </ul>
      </div>
    </div>
  </React.Fragment>
);

從上述代碼中可以看出下列有關JavaScript語言在JSX語法中的規范：

JavaScript部分在JSX語法中必須使用{}擴住。
數組在遍歷生成li標記時，必須添加key屬性，并設置為數組的索引值。

例2：有一個JSON數組，每個元素有兩個屬性：isShow和file。其中isShow取值為邏輯值，file取值為表示圖片路徑的字符串。當isShow取值為true時，file指定的圖片要顯示在頁面中；當isShow取值為false時，file指定的圖片不顯示在頁面中。

let picture=[
  {isShow:true,file:'images/01.jpg'},
  {isShow:true,file:'images/02.jpg'},
  {isShow:false,file:'images/03.jpg'},
  {isShow:true,file:'images/04.jpg'},
  {isShow:true,file:'images/05.jpg'}
];
const img=(
  <React.Fragment>
    <h2>圖片欣賞</h2>
    <div className="picture">
      {
        picture.filter((item,index)=>{
          return item.isShow
        }).map((item,index)=>{
          return <img src={item.file} key={index} />
        })
      }
    </div>
  </React.Fragment>
);

上述代碼中，使用數組的filter()方法對picture數組進行篩選，篩選條件是isShow取值為true。然后再對篩選出來的數組元素使用map()方法進行遍歷，以用來在頁面中顯示圖片。

四、在JSX格式中使用if語句

在JSX格式中是不能直接使用JavaScript的if語句的，我們通過下列五種方式來為大家講解可行的方法。

例：設置一個變量flag。規定當flag=true時，頁面中顯示一個類名為box的div標記；當flag=false時，頁面中顯示一個類名為fox的div標記。

1、使用三元運算符在JSX中實現判定

JavaScript提供的三元運算符（? :）也被稱為“三目運算符”。該運算符適合分為兩種情況的分支判定。

let flag=true;
const element=(
  <React.Fragment>
    {
      flag?
      <div className="box">
        我是box元素......
      </div>
      :
      <div className="fox">
        我是fox元素
      </div>
  }
  </React.Fragment>
);

2、使用邏輯與運算符的短路原理實現判定

JavaScript提供的邏輯與運算符（&&）的短路原理規定：當&&運算的左側為false時，右側不予計算。該運算符適合多分支的判定。

let flag=true;
const element=(
  <React.Fragment>
    {flag && <div className="box">
      我是box元素......
    </div>}
    {!flag && <div className="fox">
      我是fox元素
    </div>}
  </React.Fragment>
);

上述代碼中，因為flag變量的取值為true，所以!flag的取值為false，則!flag &&右側的元素不再計算，也就不會被渲染出來。

3、在JSX格式以外借助變量使用if語句完成判定

既然JSX格式不允許直接使用if語句，那我們就不在JSX格式中使用。我們可以在JSX格式以外的區域使用if語句。

let flag=false;
let target;
if(flag){
  target=(
    <div className="box">
      我是box元素......
    </div>
  )
}else{
  target=(
    <div className="fox">
      我是fox元素
    </div>
  )
}
const element=(
  <React.Fragment>
    {target}
  </React.Fragment>
);

上述代碼中定義了一個名為target的變量，通過在JSX格式以外進行if語句的判定，讓target變量獲得不同的JSX元素，最終在React.Fragment標記對中使用{target}引用了判定后的結果。

4、在JSX格式以外借助函數使用if語句完成判定

我們也可以在JSX格式以外的區域聲明一個函數，在函數體總使用if語句進行判定，并最終將需要渲染的JSX格式利用return語句返回。

let flag=true;
function getTarget(){
  if(flag){
    return (
      <div className="box">
        我是box元素......
      </div>
    )
  }else{
    return (
      <div className="fox">
        我是fox元素
      </div>
    )
  }
}
const element=(
  <React.Fragment>
    {getTarget()}
  </React.Fragment>
);

上述代碼中定義了一個名為getTarget的函數，該函數內部使用if判定flag變量的值，然后利用return語句將需要的JSX元素返回出去。在React.Fragment標記對中只需要使用{getTarget()}調用該函數即可。

總結

本文是React系列教程的第二篇文章，主要為大家講解了React框架中JSX語法的書寫格式。系統的學會了JSX語法的書寫格式，對于編寫復雜的React項目有很大的幫助。明天會為大家系統的講解React組件的使用方法。

關于作者

小海前端，具有18年Web項目開發和前后臺培訓經驗，在前端領域著有較為系統的培訓教材，對Vue.js、微信小程序開發、uniApp、React等全棧開發領域都有較為深的造詣。入住?，希望能夠更多的結識Web開發領域的同仁，將Web開發大力的進行普及。同時也愿意與大家進行深入的技術研討和商業合作。

在線咨詢

上一篇：用EXCEL進行跨行排序的兩種實用方法
下一篇：JavaScript編碼的一些日常習慣

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商