React
v16.4.1GitHub

DOM 元素(Elements)

React 实现了一个独立于浏览器的 DOM 系统，用于提高性能和跨浏览器兼容性。 我们借此机会在浏览器 DOM 实现中清理了一些粗糙的东西。

在 React 中，所有 DOM properties 和 attributes（包括事件处理程序）都应该是驼峰命名法命名。 例如，HTML 属性 tabindex 对应于 React 中的 tabIndex 属性。 唯一的例外是 aria-* 和 data-* 属性，它们应该是小写。例如，aria-label 就应该是 aria-label，不需要驼峰式命名。

属性中的差异

有许多属性在 React 和 HTML 之间有不同的使用方式：

checked

类型为 checkbox 或 radio 的 <input> 组件支持 checked 属性。 您可以使用它来设置该组件是否被选中。 这对构建受控组件很有用。 defaultChecked设置在首次载入组件时是否选中。

className

要指定 CSS 类，请使用 className 属性。 这适用于所有常规DOM和SVG元素，如 <div> ，<a> 和其他。

如果通过 Web Components 来使用 React（这并不常用），请改用 class 属性。

dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 用于代替在浏览器 DOM 中使用 innerHTML。 一般来说，从代码设置HTML是有风险的，因为很容易无意中将用户暴露于跨站点脚本（XSS） 攻击。 所以，你可以直接从 React 设置 HTML ，但是你必须使用dangerouslySetInnerHTML 并通过 __html 键传递一个对象，提醒自己这是危险的。 例如：

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

htmlFor

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

onChange

onChange 事件的行为与您期望的一样：每当表单字段更改时，将触发此事件。 我们故意不使用现有的浏览器行为，因为 React 依赖此事件来实时处理用户输入，onChange 的表意与浏览器行为并不一致。

selected

<option> 组件支持 selected 属性。你可以使用它去设置组件是否被选中。这对构建受控的组件是有用的。

style

注意：

文档中的一些例子为了方便使用 style ，但是 一般不建议在元素上应用 style 属性。在大多数情况下，应该使用 className 引用外部 CSS 样式表中定义的类。 在 React 应用程序中，经常在渲染时使用 style 来添加动态计算的样式。另请参阅 常见问题：样式和CSS。

style 属性接受具有驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串。 这与 JavaScript DOM 的 style 属性一致，但是更高效，并且防止XSS安全漏洞。 例如：

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

请注意，样式不自动进行兼容。 要支持旧版本的浏览器，您需要提供相应的样式属性：

const divStyle = {
  WebkitTransition: 'all', // 注意这里的大写首字母 'W'
  msTransition: 'all' // 'ms' 'ms'是唯一的小写字母的浏览器前缀
};

function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browser</div>;
}

样式使用驼峰式命名，是便于从 JS 访问 DOM 节点上的属性(例如 node.style.backgroundImage)。 ms 以外的供应商前缀应以大写字母开头。 这就是为什么 WebkitTransition 有一个大写 “W”。

React 会自动为某些内联样式的数字属性值附加一个 “px” 后缀。 如果你想使用 “px” 以外的单位，请明确指定单位，并将该值指定为字符串。 例如：

// 结果样式: '10px'
<div style={{ height: 10 }}>
  Hello World!
</div>

// 结果样式: '10%'
<div style={{ height: '10%' }}>
  Hello World!
</div>

不是所有样式的数字属性值都转换为像素后缀的字符串。某些属性保持无单位（例如zoom，order，flex）。无单位属性的完整列表可以在 这里 查看。

suppressContentEditableWarning

通常，当带有子代的元素也被标记为 contentEditable 时，会出现警告，因为它不会起作用。 此属性抑制该警告。 不要使用它，除非你正在构建一个类似 Draft.js 的库，它手动管理 contentEditable 。

suppressHydrationWarning

如果你使用服务器端的 React 渲染，通常当服务器和客户端呈现不同的内容时会发出警告。然而，在一些罕见的情况下，确保完全匹配是非常困难或不可能的。例如，时间戳在服务器上和客户机上都是不同的。。

如果你将 suppressHydrationWarning 设置为 true ，React 不会警告你有关该元素的属性和内容的不匹配。它只在单层深度上工作，并打算用作逃生舱口。不要过度使用它。你可以在 ReactDOM.hydrate() 文档 中阅读更多关于 混合(hydration) 。

value

<input> 和 <textarea> 组件支持 value 属性。 您可以使用它来设置组件的值。 这对构建受控组件很有用。 defaultValue 是不受控组件的等同项，它设置组件首次装载时的值。

所有支持的 HTML 属性

从 React 16 开始，完全支持任何 标准的 或自定义 DOM属性。

React 一直为 DOM 提供一个以 JavaScript 为中心的 API 。由于 React 组件经常采用自定义和 DOM 相关的 props(属性)，React 和 DOM API 一样使用 camelCase 约定：

<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

除了上面记录的特殊情况外，这些 props(属性) 与相应的 HTML 属性的工作方式类似。

React 支持的 DOM 属性包括：

accept acceptCharset accessKey action allowFullScreen alt async 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

只要它们完全小写，您也可以使用自定义属性。

Edit this page