React（2）認識JSX語法格式

前言

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

---

1、JSX語法的基本用法

一、使用變量定義JSX元素

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

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

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

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

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

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

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

三、在JSX元素中使用變量

在JSX元素中使用變量必須使用{}擴住，變量能夠用於JSX元素的內容中，也能夠用與JSX元素的HTML屬性取值上。

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

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

四、在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')
);

2、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標記位置是沒有任何標記對的。

3、在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()方法進行遍歷，以用來在頁面中顯示圖片。

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

在JSX格式中是不能直接使用JavaScript的if語句的，咱們經過下列五種方式來爲你們講解可行的方法。

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

一、使用三元運算符在JSX中實現斷定

JavaScript提供的三元運算符（? :）也被稱爲「三目運算符」。該運算符適合分爲兩種狀況的分支斷定。

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

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

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 &&右側的元素再也不計算，也就不會被渲染出來。

三、在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}引用了斷定後的結果。

四、在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等全棧開發領域都有較爲深的造詣。入住Segmentfault，但願可以更多的結識Web開發領域的同仁，將Web開發大力的進行普及。同時也願意與你們進行深刻的技術研討和商業合做。