JSX 常見的陷阱

JSX 常見的陷阱

JSX 看起來像 HTML 但有一些您應該知道關鍵性的差異。
注意:對於和 DOM 之間的差異,例如行內式屬性設定(inline style),請查閱這裡

DOM 的差異:
React 為了跨瀏覽器和提升效能的因素,實作一套和瀏覽器本身無關的 events 以及模擬 DOM 的機制。我們可以借由這個機制處理一些關於原始 DOM 設計上一些不足的地方。

  • 所有的 DOM 屬性 PropertiesAttributes (包含事件)都應該使用駝峰式命名 camelCased ,這和一般的 Javascrpt 程式碼風格一致。我們故意在這邊違背 html 規格 ,因此這和 html 規格是不同的。
  • style 屬性透過 Javascript 物件和駝峰式的屬性來設定,而不是 CSS 字串。所以設定 CSS 的語法風格會和 DOM, Javascrit 屬性一致,外加這麼做可以防止 XSS 攻擊。
  • 所有在事件符合 W3C 規範,且所有事件(包含 submit)傳遞都遵照 W3C 規範,查閱 Event System 取得更多資訊。
  • 關於 onChange 事件行為就跟你所期待的一樣,當一個表單欄位改變了,事件就會被觸發,而不是在 onblur 失去焦點的時候才觸發。 我們特意違背現有的瀏覽器行為,因為原始的 onChange 事件行為跟其名稱並不符合,React 需要正確的用到這個 Event ,當使用者輸入資料的同時 React 就會及時反應。查閱Forms得知更多資訊。
  • 表單輸入的屬性例如 value checked 更多關於一些命名,用法,等請查閱 Forms

移除空白字元

JSX 不像 HTML 在渲染時如果在同一個點重複空白字元會保留一個其他自動移除,關於這點 JSX 會移除所有在 { } 之間的空白。如果你需要加入空白字元則要使用 {' '}

1
<div>{this.props.name} {' '} {this.props.surname}</div>

如果你對這個設計有什麼想法,歡迎加入Issue #65討論。

HTML 字元實體

您可以插入 HTML 字元實體在 JSX 裡:

1
<div>First &middot; Second</div>

如果你想要顯示一個 HTML 字元實體在動態的內容中,你會遇到重複跳脫字元的問題。因為 React 為了防止 XSS 會把所有要呈現的文字都先跳脫(escapes)。

1
2
// 不好的示範: 會輸出 "First &middot; Second"
<div>{'First &middot; Second'}</div>

這裡有一些方式可以解決這個問題。最簡單的方式就是在 Javascript 直接寫 unicode,不過你需要確定檔案被存成 UTF-8 格式。

1
<div>{'First · Second'}</div>

一個更安全的替代方式式找到 unicode 對應的編碼

1
2
<div>{'First \u00b7 Second'}</div>
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

也可以把字串混合進陣列裡面

1
<div>{['First ', <span>&middot;</span>, ' Second']}</div>

當你要插入 HTML 的時候你可以用這最後一招

1
<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

自定 HTML 屬性

如果你傳給 HTML 元素的屬性並不在 HTML 規範中,React 並不會渲染它。如果你想要自訂一個屬性(attribute)。你應該使用前綴詞 data-

1
<div data-custom-attribute="foo" />

無障礙網站的話屬性使用 aria- 開頭。

1
<div aria-hidden={true} />
作者

andyyou(YOU,ZONGYAN)

發表於

2014-02-10

更新於

2021-12-12

許可協議