ReactJS JSX

React使用JSX進(jìn)行模板化，而不是使用普通的JavaScript。因?yàn)闆](méi)有必要使用Javascript，但是，下面是一些它的利弊。

• 它更快，因?yàn)樗趯⒋a編譯為JavaScript時(shí)執(zhí)行優(yōu)化。
• 它也是類型安全的，在編譯過(guò)程中大部分錯(cuò)誤都可以被捕獲。
• 如果熟悉HTML，則可以更輕松，更快地編寫(xiě)模板。

使用JSX

在大多數(shù)情況下，JSX看起來(lái)像一個(gè)普通的HTML。 我們已經(jīng)在“開(kāi)發(fā)環(huán)境設(shè)置”一章中使用了它。 下面來(lái)看看App.jsx中返回div的代碼。

文件：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

盡管它與HTML很相似，但在處理JSX時(shí)還需要記住一些事項(xiàng)。

嵌套的元素

如果想返回更多的元素，需要用一個(gè)容器元素來(lái)包裝它。注意這里我們?nèi)绾问褂?code>div作為h1，h2和p元素的包裝。

文件：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header h1</h1>
            <h2>Content h2</h2>
            <p>This is the content ~ </p>
         </div>
      );
   }
}
export default App;

運(yùn)行上面示例代碼，得到以下結(jié)果 -

屬性

除了常規(guī)的HTML屬性外，還可以使用自己的自定義屬性。 當(dāng)想要添加自定義屬性時(shí)，需要使用數(shù)據(jù)前綴。在下面的例子中，我們添加了data-myattribute作為p元素的一個(gè)屬性。

文件：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header h1</h1>
            <h2>Content h2</h2>
            <p data-myattribute = "somevalue">This is the content ~ </p>
         </div>
      );
   }
}
export default App;

JavaScript表達(dá)式

JavaScript表達(dá)式可以在JSX中使用。只需要用大括號(hào){}來(lái)包裝它。 以下示例將呈現(xiàn)數(shù)字：2。

文件：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>結(jié)果值為：{1+1}</h1>
         </div>
      );
   }
}
export default App;

執(zhí)行上面示例代碼，得到以下結(jié)果 -

不能在JSX中使用if else語(yǔ)句，而是使用條件(三元)表達(dá)式。 在下面的例子中，變量i等于1，所以瀏覽器將呈現(xiàn)為真，如果將其更改為其他值，它將呈現(xiàn)false。

文件：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

執(zhí)行上面示例代碼，得到以下結(jié)果 -

樣式

React建議使用內(nèi)聯(lián)樣式。當(dāng)想要設(shè)置內(nèi)聯(lián)樣式時(shí)，需要使用駝峰(camelCase)語(yǔ)法。 React還會(huì)在特定元素的數(shù)值后自動(dòng)附加px。以下示例顯示如何將myStyle內(nèi)聯(lián)添加到h1元素。

文件：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 40,
         color: 'green'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

執(zhí)行上面示例代碼，得到以下結(jié)果 -

注釋

在寫(xiě)注釋時(shí)，我們需要在想要在標(biāo)簽的子部分寫(xiě)注釋的時(shí)候放上大括號(hào){}。 在編寫(xiě)注釋時(shí)總是使用{}是一個(gè)好習(xí)慣，因?yàn)槲覀兿Ｍ诰帉?xiě)應(yīng)用程序時(shí)保持一致。如下代碼所示 -

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

命名約定

HTML標(biāo)簽總是使用小寫(xiě)的標(biāo)簽名稱，而React組件以大寫(xiě)字母開(kāi)頭。

注意 - 應(yīng)該使用className和htmlFor作為XML屬性名稱，而不是class和for。

這在React官方頁(yè)面上解釋為 -
由于JSX是JavaScript，所以不鼓勵(lì)使用類和標(biāo)識(shí)符等標(biāo)識(shí)符作為XML屬性名稱。 React DOM組件期望使用DOM屬性名稱，例如className和htmlFor。