react 的JSX語法須要注意哪些點？

註釋方式

ReactDOM.render(
    <div>
        {/*JSX 中的註釋方式*/}
    </div>,
    document.getElementById('root')
 )

jsx語法中只能有一個頂級標籤（元素），以下寫法是錯誤的，這和react的diff算法相關

ReactDOM.render(
    <div>
    </div>
    <p></p>,
    document.getElementById('root')
 )

JSX中全部的標籤都必須有閉標籤

ReactDOM.render(
    <div>
        <input type="text" />
        <img src="" />
    </div>,
    document.getElementById('root')
 )

使用組件時，首字母必須大寫

... ...
import Banner from ./Banner

ReactDOM.render(
    <div>
        <Banner />
    </div>,
    document.getElementById('root')
 )

在JSX中咱們一般是經過 {} 的方式插入值，可是設置style屬性須要{{ }},

而且遇到-分割的屬性時，使用小駝峯的寫法，如：text-align

ReactDOM.render(
    <div style={{background:red;}}>
        { 1+2 }
        <div style={{ padding: 30, textAlign: 'center' }}>
           456
        </div>　　　　　　
    </div>,
    document.getElementById('root')
 )              

html標籤上的屬性名

由於jsx最終要轉成js進行編譯，所以html標籤上的屬性名與JavaScript關鍵字和保留字相沖突的都須要作一些變化，其規則同js中操做dom屬性時同樣：

通常來講，在使用js操做標籤屬性時，若出現與JavaScript關鍵字和保留字相沖突的狀況，除html標籤class（轉爲className）之外的屬性，在屬性前加上小寫的html便可，如

html標籤的class在jsx語法中變爲 className，html標籤的for屬性（如：<label for="msg" ></label>）在jsx中變爲<label htmlFor="msg" ></label>，

ReactDOM.render(
    <div className="tips">
        <label htmlFor="name" ></label>
    </div>,
    document.getElementById('root')
 )

調用.css 文件中的css屬性

... ...
import classes form './myCss.css'

ReactDOM.render(
    <div className={classes['mycss']}>
        
    </div>,
    document.getElementById('root')
 )

 事件必須修正this指針，且綁定事件名時要使用小駝峯的寫法

constructor{
  this.fun = this.fun.bind(this)      
}
//或
onClick = {() => ()} //綁定的事件名小駝峯寫法
onClick = {this.fun.bind(this)}