• DOM 元素
    • 属性差异
      • checked
      • className
      • dangerouslySetInnerHTML
      • htmlFor
      • onChange
      • selected
      • style
      • suppressContentEditableWarning
      • suppressHydrationWarning
      • value
    • All Supported HTML Attributes

    DOM 元素

    React 实现了一套独立于浏览器的 DOM 系统，兼顾了性能和跨浏览器的兼容性。我们借此机会完善了浏览器 DOM 实现的一些特殊情况。

    在 React 中，所有的 DOM 特性和属性（包括事件处理）都应该是小驼峰命名的方式。例如，与 HTML 中的 tabindex 属性对应的 React 的属性是 tabIndex。例外的情况是 aria- 以及 data- 属性，一律使用小写字母命名。比如, 你依然可以用 aria-label 作为 aria-label。

    属性差异

    React 与 HTML 之间有很多属性存在差异：

    checked

    当 <input> 组件的 type 类型为 checkbox 或 radio 时，组件支持 checked 属性。你可以使用它来设置组件是否被选中。这对于构建受控组件（controlled components）很有帮助。而 defaultChecked 则是非受控组件的属性，用于设置组件首次挂载时是否被选中。

    className

    className 属性用于指定 CSS 的 class，此特性适用于所有常规 DOM 节点和 SVG 元素，如 <div>，<a> 及其它标签。

    如果你在 React 中使用 Web Components（这是一种不常见的使用方式），请使用 class 属性代替。

    dangerouslySetInnerHTML

    dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于跨站脚本（XSS）的攻击。因此，你可以直接在 React 中设置 HTML，但当你想设置 dangerouslySetInnerHTML 时，需要向其传递包含 key 为 __html 的对象，以此来警示你。例如：

    1. function createMarkup() {
    2.   return {__html: 'First &middot; Second'};
    3. }
    5. function MyComponent() {
    6.   return <div dangerouslySetInnerHTML={createMarkup()} />;
    7. }

    htmlFor

    由于 for 在 JavaScript 中是保留字，所以 React 元素中使用了 htmlFor 来代替。

    onChange

    onChange 事件与预期行为一致：每当表单字段变化时，该事件都会被触发。我们故意没有使用浏览器已有的默认行为，是因为 onChange 在浏览器中的行为和名称不对应，并且 React 依靠了该事件实时处理用户输入。

    selected

    <option> 组件支持 selected 属性。你可以使用该属性设置组件是否被选择。这对构建受控组件很有帮助。

    style

    注意

    在文档中，部分例子为了方便，直接使用了 style，但是通常不推荐将 style 属性作为设置元素样式的主要方式。在多数情况下，应使用 className 属性来引用外部 CSS 样式表中定义的 class。style 在 React 应用中多用于在渲染过程中添加动态计算的样式。另请参阅：FAQ：Styling 和 CSS。

    style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串。这与 DOM 中 style 的 JavaScript 属性是一致的，同时会更高效的，且能预防跨站脚本（XSS）的安全漏洞。例如：

    1. const divStyle = {
    2.   color: 'blue',
    3.   backgroundImage: 'url(' + imgUrl + ')',
    4. };
    6. function HelloWorldComponent() {
    7.   return <div style={divStyle}>Hello World!</div>;
    8. }

    注意：样式不会自动补齐前缀。如需支持旧版浏览器，请手动补充对应的样式属性：

    1. const divStyle = {
    2.   WebkitTransition: 'all', // note the capital 'W' here
    3.   msTransition: 'all' // 'ms' is the only lowercase vendor prefix
    4. };
    6. function ComponentWithTransition() {
    7.   return <div style={divStyle}>This should work cross-browser</div>;
    8. }

    Style 中的 key 采用小驼峰命名是为了与 JS 访问 DOM 节点的属性保持一致（例如：node.style.backgroundImage ）。浏览器引擎前缀都应以大写字母开头，除了 ms。因此，WebkitTransition 首字母为 ”W”。

    React 会自动添加 ”px” 后缀到内联样式为数字的属性后。如需使用 ”px” 以外的单位，请将此值设为数字与所需单位组成的字符串。例如：

    1. // Result style: '10px'
    2. <div style={{ height: 10 }}>
    3.   Hello World!
    4. </div>
    6. // Result style: '10%'
    7. <div style={{ height: '10%' }}>
    8.   Hello World!
    9. </div>

    但并非所有样式属性都转换为像素字符串。有些样式属性是没有单位的(例如 zoom，order，flex)。无单位属性的完整列表在此处。

    suppressContentEditableWarning

    通常，当拥有子节点的元素被标记为 contentEditable 时，React 会发出一个警告，因为这不会生效。该属性将禁止此警告。尽量不要使用该属性，除非你要构建一个类似 Draft.js 的手动管理 contentEditable 属性的库。

    suppressHydrationWarning

    如果你使用 React 服务端渲染，通常会在当服务端与客户端渲染不同的内容时发出警告。但是，在一些极少数的情况下，很难甚至于不可能保证内容的一致性。例如，在服务端和客户端上，时间戳通常是不同的。

    如果设置 suppressHydrationWarning 为 true，React 将不会警告你属性与元素内容不一致。它只会对元素一级深度有效，并且打算作为应急方案。因此不要过度使用它。你可以在 ReactDOM.hydrate() 文档 中了解更多关于 hydration 的信息。

    value

    <input> 和 <textarea> 组件支持 value 属性。你可以使用它为组件设置 value。这对于构建受控组件是非常有帮助。defaultValue 属性对应的是非受控组件的属性，用于设置组件第一次挂载时的 value。

    All Supported HTML Attributes

    在 React 16 中，任何标准的或自定义的 DOM 属性都是完全支持的。

    React 为 DOM 提供了一套以 JavaScript 为中心的 API。由于 React 组件经常采用自定义或和 DOM 相关的 props 的关系，React 采用了小驼峰命名的方式，正如 DOM APIs 那样：

    1. <div tabIndex="-1" />      // Just like node.tabIndex DOM API
    2. <div className="Button" /> // Just like node.className DOM API
    3. <input readOnly={true} />  // Just like node.readOnly DOM API

    除了上述文档提到的特殊拼写方式以外，这些 props 的用法与 HTML 的属性也极为类似。

    React 支持的 DOM 属性有：

    1. accept acceptCharset accessKey action allowFullScreen alt async autoComplete
    2. autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
    3. cite classID className colSpan cols content contentEditable contextMenu controls
    4. controlsList coords crossOrigin data dateTime default defer dir disabled
    5. download draggable encType form formAction formEncType formMethod formNoValidate
    6. formTarget frameBorder headers height hidden high href hrefLang htmlFor
    7. httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
    8. loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
    9. min minLength multiple muted name noValidate nonce open optimum pattern
    10. placeholder poster preload profile radioGroup readOnly rel required reversed
    11. role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
    12. sizes span spellCheck src srcDoc srcLang srcSet start step style summary
    13. tabIndex target title type useMap value width wmode wrap

    同样，所有的 SVG 属性也完全得到了支持：

    1. accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
    2. amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
    3. baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight
    4. clip clipPath clipPathUnits clipRule colorInterpolation
    5. colorInterpolationFilters colorProfile colorRendering contentScriptType
    6. contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
    7. display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
    8. end exponent externalResourcesRequired fill fillOpacity fillRule filter
    9. filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
    10. fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
    11. g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
    12. gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
    13. imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
    14. kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
    15. limitingConeAngle local markerEnd markerHeight markerMid markerStart
    16. markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
    17. numOctaves offset opacity operator order orient orientation origin overflow
    18. overlinePosition overlineThickness paintOrder panose1 pathLength
    19. patternContentUnits patternTransform patternUnits pointerEvents points
    20. pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
    21. r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
    22. requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
    23. spacing specularConstant specularExponent speed spreadMethod startOffset
    24. stdDeviation stemh stemv stitchTiles stopColor stopOpacity
    25. strikethroughPosition strikethroughThickness string stroke strokeDasharray
    26. strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
    27. strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
    28. textDecoration textLength textRendering to transform u1 u2 underlinePosition
    29. underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
    30. vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
    31. vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
    32. writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
    33. xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
    34. xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

    你也可以使用自定义属性，但要注意属性名全都为小写。