JSX是什麼？ jsx使用方法介紹（附程式碼）

什麼是jsx？ jsx的用法又有哪些？這篇文章帶給大家的內容就是關於JSX是什麼？ jsx的使用方法介紹（附程式碼），接下來就來看看具體的內容吧。

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

jsx的使用之JSX中的運算

   render() {
      return(
        <div>
           <h2>算数题</h2>
           <ul>
             <li>5+6={5+6}</li>
             <li>6+6={6+6}</li>
             <li>10*10={10*10}</li>
           </ul>
        </div>
      )
    }

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

jsx的使用之JSX中的變數

 render() {
      const flag = true;
      return(
        <div>
            {flag ? (<div>flag为真</div>) : (<div>flag为假</div>)}
        </div>
      )
    }

#jsx的使用之JSX中的樣式

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

 render() {
      var newStyle = {
        background: 'blue',
        fontSize:'15px'
      }
      return(
        <div>
            <div style={{color: &#39;red&#39;}}>颜色</div>
            <div style={newStyle}>样式</div>
        </div>
      )
    }

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

jsx的使用之JSX中的HTML標籤

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

1. class得用className代替

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

<label htmlFor="msg" ></label>

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

相關推薦：

##Vue如何支援JSX語法詳解

JavaScript的React框架中的JSX語法學習入門教學_基礎知識

#關於React 的詳細介紹

#

以上是JSX是什麼？ jsx使用方法介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！