jsx 不能直接運行，是被 babel-loader 中的 react 這個 preset 翻譯的

需要注意：

1.必須被一個單獨的大標簽包裹，比如：div 或者 section

2.標簽必須封閉

3.class 要寫成 className， for 要寫成 htmlFor

4.HTML 注釋不能使用，只能使用 JS 注釋

5.原生標簽，比如：p、li、div 如果要使用自定義屬性，必須用 data- 前綴。

<p data-a="10"></p>

如果是自定義標簽，此時可以隨便傳屬性：

<App a="10"></App>

6.JS 表達式用 { } 單大括號包裹。

在 JSX 中不能使用 if...else... 語句，但可以使用 conditional (三元運算) 表達式來替代。

7.可以運行函數

8.樣式使用雙大括號

9.可以使用數組，數組中如果是 JSX 語法，數組會被自動展開，所以不需要使用 ng-repeat 或 v-for 這樣的指令展開數組。

class List extends Component {
  // 組件中最重要的方法就是render方法,render是渲染的意思
  render() {
      /**
       * 定義一個數組
       * map 映射成一個數組
       * 定義的JSX項目上要求有key屬性,只要是重復的數組項目,都要有不能重復的key屬性,這是要求。
       */
      let arr = ["白板","幺雞","二條"].map((item,index)=>{
  　　　　return <li key={index}>{item}</li>
      });
      // 返回一個jsx語法,非常牛逼語法
      return <ul>{arr}</ul>
  }
} 

效果圖：

10.小寫字母開頭為原生標簽，大寫字母開頭為React組件。

總結

以上是生活随笔為你收集整理的JSX 语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。