React從入門到精通系列之(24)DOM Elements

張亞濤發表於2016-12-16
React

二十四、DOM Elements

React實現了一個獨立於瀏覽器的DOM系統，用於提高效能和處理瀏覽器相容性。 React作者藉此機會在瀏覽器DOM實現中清理了一些粗糙的實現（噁心的原生DOM操作）。

在React中，所有DOM properties 和 attributes（包括event handle）都應該是駝峰命名法。 例如，HTML屬性tabindex對應於React中的tabIndex屬性。 特殊的是aria- *和data- *屬性，應該是全部小寫的。

Attributes的區別

有許多屬性在React和HTML之間有不同的表現：

checked

checked屬性在<input type="checkbox">或<input type="radio">中使用。 您可以使用它來設定是否選中該元件。 這對可控元件很有用。 defaultChecked是預設選中，它在首次裝入元件時是預設選中的。

className

因為class是Javascript的關鍵字，所以在指定CSS類時，使用className屬性。這適用於所有常規DOM和SVG元素，就像<div>，<a>或者其他標籤。
如果使用React 和 Web Components（這是不常見的），請把ClassName改為class屬性。

dangerouslySetInnerHTML

dangerouslySetInnerHTML是React替換在瀏覽器DOM中使用innerHTML。
一般來說，從程式碼設定HTML是有風險的，因為很容易無意中將使用者暴露於跨站點指令碼（XSS）攻擊。 所以，你可以直接從React設定HTML，但是你必須輸入dangerouslySetInnerHTML並使用__html鍵傳遞一個物件，提醒自己這是危險的。 例如：

import React from `react`;
import ReactDOM from `react-dom`;

function createMarkup() {
    return {__html: `First <<>> Second`};
}
function MyComponent() {
    return <div dangerouslySetInnerHTML={createMarkup()} />;
}
ReactDOM.render(
    <MyComponent />,
    document.getElementById(`root`)
);

htmlFor

由於for是JavaScript中的保留字，React元素使用htmlFor。

onChanged

onChange事件的行為與您期望的一樣：每當表單欄位更改時，將觸發此事件。 我們故意不使用現有的瀏覽器行為，因為onChange是其行為的誤稱，React依賴此事件來實時處理使用者輸入。

selected

selected屬性在<option>中使用。 您可以使用它來設定是否選擇了元件。 這對控制類的元件很有用。

style

style屬性接受一個駝峰命名法的JavaScript物件，而不是CSS字串。 這與DOM元素style的JavaScript屬性一致，更高效，並防止XSS安全漏洞。 例如：

const divStyle = {
    color: `blue`,
    backgroundImage: `url` + imgUrl + `)`,
};
function HelloWorldComponent() {
    return <div style={divStyle}>HelloWorld</div>;
}

請注意，樣式不自動設定css的字首。 要支援舊版本的瀏覽器，您需要提供相應的樣式屬性：

const divStyle = {
    WebkitTransition: `all`,
    msTransition: `all`,
};
function ComponentWithTransition() {
   return <div style={divStyle}>This should work cross-browser</div>;
}

style的key是駝峰命名法，以便與從JS訪問DOM節點上的屬性（例如node.style.backgroundImage）一致。 ms以外的瀏覽器字首應以大寫字母開頭。 這就是為什麼WebkitTransition有一個大寫“W”。

value

<input>和<textarea>支援value屬性。 您可以使用它來設定元素的值。 這對控制類元件很有用。 defaultValue是預設值，在元件首次裝入時將會設定這個預設值。

相關文章