?
This document uses PHP Chinese website manual Release
React 實現(xiàn)了一套與瀏覽器無關(guān)的 DOM 系統(tǒng)，兼顧了性能和跨瀏覽器的兼容性。借此機會，我們清理了瀏覽器 DOM 實現(xiàn)中一些不一致的問題。
在React中，所有DOM屬性和屬性（包括事件處理程序）都應(yīng)該是camelCased的。例如，HTML屬性tabindex對應(yīng)tabIndex于React中的屬性。唯一的例外是aria-*和data-*屬性，應(yīng)小寫。例如，你可以繼續(xù)aria-label作為aria-label。
屬性差異
React和HTML之間有許多不同的屬性：
checked
該checked屬性由<input>類型checkbox或的組件支持radio。您可以使用它來設(shè)置組件是否被選中。這對于構(gòu)建受控組件非常有用。defaultChecked是不受控制的等價物，用于設(shè)置組件是否在第一次安裝時進行檢查。
className
要指定一個CSS類，請使用該className屬性。這適用于所有常規(guī)的DOM和SVG元素一樣<div>，<a>和其他。
如果您使用Web組件的反應(yīng)（這是不常見的），請改用該class屬性。
dangerouslySetInnerHTML
dangerouslySetInnerHTML是React innerHTML在瀏覽器DOM中使用的替代品。一般來說，從代碼中設(shè)置HTML是有風險的，因為很容易讓您的用戶無意中發(fā)現(xiàn)跨站腳本攻擊（XSS）。因此，您可以直接從React中設(shè)置HTML，但您必須輸入dangerouslySetInnerHTML并使用__html密鑰傳遞對象，以提醒自己危險。例如：
function createMarkup() { return {__html: 'First · Second'};}function MyComponent() { return <div dangerouslySetInnerHTML={createMarkup()} />;}htmlFor
既然for是JavaScript中的保留字，React元素就會用到htmlFor。
onChange
onChange事件的行為與您所期望的一樣：每當表單字段發(fā)生更改時，將觸發(fā)此事件。我們故意不使用現(xiàn)有的瀏覽器行為，因為onChange它的行為不當，React依靠此事件來實時處理用戶輸入。
selected
selected屬性由<option>組件支持。您可以使用它來設(shè)置組件是否被選中。這對于構(gòu)建受控組件非常有用。
style
style屬性接受帶有camelCased屬性的JavaScript對象而不是CSS字符串。這與DOM styleJavaScript屬性一致，效率更高，并可防止XSS安全漏洞。例如：
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',};function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>;}請注意，樣式不是自動復(fù)制的。要支持舊版瀏覽器，您需要提供相應(yīng)的樣式屬性：
const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix};
function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>;}樣式鍵是駝峰式的，以便與從JS（例如node.style.backgroundImage）訪問DOM節(jié)點上的屬性一致。除ms大寫字母之外的供應(yīng)商前綴應(yīng)以大寫字母開頭。這就是為什么WebkitTransition有一個大寫“W”。
React會自動將“px”后綴附加到某些內(nèi)聯(lián)樣式屬性。例如：
// This:<div style={{ height: 10 }}>
Hello World!</div>;// Becomes:<div style="height: 10px;">
Hello World!</div>不是所有的樣式屬性都轉(zhuǎn)換為像素字符串。某些那些仍然無單位（例如zoom，order，flex）。無單位屬性的完整列表可以在這里看到。
suppressContentEditableWarning
通常情況下，當有孩子的元素也被標記為時會有警告contentEditable，因為它不起作用。該屬性會抑制該警告。除非你正在構(gòu)建一個像手動管理的Draft.js這樣的庫，否則不要使用它contentEditable。
value
value屬性由<input>和<textarea>組件支持。您可以使用它來設(shè)置組件的值。這對于構(gòu)建受控組件非常有用。defaultValue是不受控制的等價物，用于設(shè)置組件首次安裝時的值。
所有支持的HTML屬性
截至React 16，完全支持任何標準或自定義 DOM屬性。
React一直為DOM提供以JavaScript為中心的API。由于React組件經(jīng)常采用自定義和DOM相關(guān)的道具，因此React camelCase像使用DOM API一樣使用約定：
<div tabIndex="-1" /> // Just like node.tabIndex DOM API<div className="Button" /> // Just like node.className DOM API<input readOnly={true} /> // Just like node.readOnly DOM API這些道具的工作方式與相應(yīng)的HTML屬性類似，但上面記錄的特例除外。
React支持的一些DOM屬性包括：
accept acceptCharset accessKey action allowFullScreen allowTransparency altasync autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID className colSpan cols content contentEditable contextMenu controls controlsList coords crossOrigin data dateTime default defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload profile radioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrap
同樣，所有SVG屬性都得到完全支持：
accentHeight accumulate additive alignmentBaseline allowReorder alphabetic amplitude arabicForm ascent attributeName attributeType autoReverse azimuth baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight clip clipPath clipPathUnits clipRule colorInterpolation colorInterpolationFilters colorProfile colorRendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground end exponent externalResourcesRequired fill fillOpacity fillRule filter filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor limitingConeAngle local markerEnd markerHeight markerMid markerStart markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode numOctaves offset opacity operator order orient orientation origin overflow overlinePosition overlineThickness paintOrder panose1 pathLength patternContentUnits patternTransform patternUnits pointerEvents points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shapeRendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stopColor stopOpacity strikethroughPosition strikethroughThickness string stroke strokeDasharray strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor textDecoration textLength textRendering to transform u1 u2 underlinePosition underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic vHanging vIdeographic vMathematical values vectorEffect version vertAdvY vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan
只要它們完全小寫，您也可以使用自定義屬性。