初識React(2)：什么是JSX？

endless_road 發布于2019-08-26 12:14 / 2152人閱讀

摘要：前言在中，我們的頁面內容就是通過來編寫，那么到底是什么呢其實就是對象，會構建創建一個對象來描述結構的信息。這里要記住是的一種擴展語言，類似但是又不是，因為中還能進行運算，判斷，加入一些語言等。

前言

在react中，我們的頁面內容就是通過JSX來編寫，那么JSX到底是什么呢？JSX其實就是JavaScript對象，會構建創建一個js對象來描述HTML結構的信息。這里要記住JSX是js的一種擴展語言，類似HTML但是又不是HTML，因為JSX中還能進行運算，判斷，加入一些js語言等。

JSX中的運算

   render() {
      return(
        
           算數題
           
             5+6={5+6}
             6+6={6+6}
             10*10={10*10}
           
        
      )
    }

在JSX中是用 {} 來區分是HTML還是js的，也就是說，所有的js語言都得用 {} 括起來

JSX中的變量

 render() {
      const flag = true;
      return(
        
            {flag ? (flag為真
) : (flag為假)}
        
      )
    }

JSX中的樣式

在JSX中,給元素添加樣式也是用style屬性，但是style里面放的是一個樣式對象，如下所示：

 render() {
      var newStyle = {
        background: "blue",
        fontSize:"15px"
      }
      return(
        
            顏色
            樣式
        
      )
    }

通過上述案例，我們可以知道JSX中，樣式的屬性名稱得用駝峰命名

JSX中的HTML標簽

在JSX中，有些標簽名稱為了防止沖突得做一些轉換：

class得用className代替

lable元素中的for屬性，得用htmlFor代替，如下：

這里還要注意，JSX中的所有標簽必須得是閉標簽

GPU云服務器云服務器 2物聯網是什么 docker初識 269云服務器是什么意思初識關系數據庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108303.html

react開發教程（－）初識

摘要：定義一個組件可以在其他組件中調用這個組件調用組件劉宇組件插入內容在上面的案例中可以看到吧寫到當中，這種寫法稱為。 React初識 React是Facebook推出的一個javascript庫(用來創建用戶界面的Javascript庫)，所以他只是和用戶的界面打交道，你可以把它看成MVC中的V(視圖)這一層。組件 React的一切都是基于組件的。web世界的構成是基于各種HTML標簽的...

Allen 2019-08-21 15:36 評論0 收藏0
React系列---React（一）初識React

摘要：系列一初識系列二組件的和系列三組件的生命周期是推出的一個庫，它的口號就是用來創建用戶界面的庫，所以它只是和用戶界面打交道，可以把它看成中的視圖層。系列一初識系列二組件的和系列三組件的生命周期 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 showImg(https://...

lanffy 2019-08-20 17:27 評論0 收藏0
初識React

摘要：初識依稀記得那年參加線下活動，第一次聽說這個詞語，當時的主講人是郭達峰，他播放了一個關于及的性能對比視頻。合成事件會以事件委托的方式綁定到組件最上層，并且在組件卸載的時候自動銷毀綁定的事件。初識React 依稀記得2015那年參加線下活動，第一次聽說React這個詞語，當時的主講人是郭達峰，他播放了一個關于ember、angular及react的性能對比視頻： React.js Co...

kuangcaibao 2019-08-21 14:47 評論0 收藏0
初識React(3)：組件

摘要：創建組件創建組件之前要注意以下幾點組件創建的名稱首字母得大寫組件中返回的只能是一個根節點，所有的內容得用一個元素都框起來無狀態函數式組件無狀態函數式組件可以理解成就是一個函數生成的，使得代碼的可讀性更好，并且精簡便利，減少了冗余，無狀態組件創建組件創建組件之前要注意以下幾點：組件創建的名稱首字母得大寫組件中返回的JSX只能是一個根節點，所有的內容得用一個元素都框起來 1.無...

FullStackDeveloper 2019-08-26 12:19 評論0 收藏0