html

React Strict DOM 提供基于 HTML 的跨平台组件。

原生布局受到限制

在原生平台上，块级元素的预期默认布局已进行填充，但不支持 流动布局、网格布局 或行内 flexbox 布局。这可能会导致文本相对于 Web 的布局出现意外情况，并且目前排除了使用 inline、inline-block 或 inline-flex 显示值的可能性。

概述

组件和属性是 React DOM 提供的 HTML 组件和属性的严格子集。要了解有关每个 html 组件的更多信息，请参阅以下指南。

• html.*
• html.a
• html.button
• html.img
• html.input
• html.label
• html.li
• html.optgroup
• html.option
• html.select
• html.textarea

兼容性

下表表示使用 React Strict DOM 进行跨平台 React 开发的严格 HTML API 表面的兼容性状态。 下面列出的所有 API 均被认为在 Web 上受支持。

✅ = React Native 内置支持
🟡 = 在 JavaScript 中填充
❌ = 不支持

标签	Android	iOS	问题 #
a	🟡	🟡
article	🟡	🟡
aside	🟡	🟡
b	🟡	🟡
bdi	🟡	🟡
bdo	🟡	🟡
blockquote	🟡	🟡
br	🟡	🟡
button	🟡	🟡
code	🟡	🟡
dialog	❌	❌	#5
del	🟡	🟡
div	🟡	🟡
em	🟡	🟡
footer	🟡	🟡
form	❌	❌	#6
h1-6	🟡	🟡
header	🟡	🟡
hr	🟡	🟡
i	🟡	🟡
img	🟡	🟡
input	🟡	🟡
input[type="checkbox"]	❌	❌	#11
input[type="color"]	❌	❌	#12
input[type="date"]	❌	❌	#13
input[type="file"]	❌	❌	#14
input[type="radio"]	❌	❌	#15
ins	🟡	🟡
kbd	🟡	🟡
label	🟡	🟡
li	🟡	🟡
main	🟡	🟡
mark	🟡	🟡
nav	🟡	🟡
ol	🟡	🟡
optgroup	❌	❌	#7
option	❌	❌	#8
p	🟡	🟡
pre	🟡	🟡
progress	❌	❌	#9
s	🟡	🟡
section	🟡	🟡
select	❌	❌	#10
span	🟡	🟡
strong	🟡	🟡
sub	🟡	🟡
sup	🟡	🟡
svg	❌	❌	#4
textarea	🟡	🟡
u	🟡	🟡
ul	🟡	🟡

属性	Android	iOS	问题 #
alt (img)	🟡	🟡
aria-activedescendant	❌	❌
aria-atomic	❌	❌
aria-autocomplete	❌	❌
aria-busy	🟡	🟡
aria-checked	🟡	🟡
aria-colcount	❌	❌
aria-colindex	❌	❌
aria-colindextext	❌	❌
aria-colspan	❌	❌
aria-controls	❌	❌
aria-current	❌	❌
aria-describedby	🟡	🟡
aria-details	❌	❌
aria-disabled	🟡	🟡
aria-errormessage	❌	❌
aria-expanded	🟡	🟡
aria-flowto	❌	❌
aria-haspopup	❌	❌
aria-hidden	🟡	🟡
aria-invalid	❌	❌
aria-keyshortcuts	❌	❌
aria-label	🟡	🟡
aria-labelledby	🟡	🟡
aria-level	❌	❌
aria-live	🟡	🟡
aria-modal	🟡	🟡
aria-multiline	❌	❌
aria-multiselectable	❌	❌
aria-orientation	❌	❌
aria-owns	❌	❌
aria-placeholder	❌	❌
aria-posinset	🟡	🟡
aria-pressed	❌	❌
aria-readonly	❌	❌
aria-required	❌	❌
aria-roledescription	❌	❌
aria-rowcount	❌	❌
aria-rowindex	❌	❌
aria-rowindextext	❌	❌
aria-rowspan	❌	❌
aria-selected	🟡	🟡
aria-setsize	🟡	🟡
aria-sort	❌	❌
aria-valuemax	🟡	🟡
aria-valuemin	🟡	🟡
aria-valuenow	🟡	🟡
aria-valuetext	🟡	🟡
autoComplete (input)	🟡	🟡
autoComplete (textarea)	🟡	🟡
autoFocus	❌	❌
checked (input)	❌	❌
crossOrigin (img)	🟡	🟡
data-testid	🟡	🟡
data-*	❌	❌
decoding (img)	❌	❌
defaultChecked (input)	❌	❌
defaultValue (input)	❌	❌
dir	🟡	🟡
disabled (button)	🟡	🟡
disabled (input)	🟡	🟡
disabled (textarea)	🟡	🟡
download (a)	❌	❌
draggable (img)	❌	❌
elementTiming	❌	❌
enterKeyHint (input)	🟡	🟡
enterKeyHint (textarea)	🟡	🟡
fetchPriority (img)	❌	❌
for (label)	❌	❌
height (img)	🟡	🟡
hidden	🟡	🟡
href (a)	❌	❌
id	🟡	🟡
inert	❌	❌
inputMode (input)	🟡	🟡
inputMode (textarea)	🟡	🟡
label (option)	❌	❌
label (optgroup)	❌	❌
lang	❌	❌
loading (img)	❌	❌
max (input)	❌	❌
max (textarea)	❌	❌
maxLength (input)	✅	✅
maxLength (textarea)	✅	✅
min (input)	❌	❌
min (textarea)	❌	❌
minLength (input)	❌	❌
minLength (textarea)	❌	❌
multiple (select)	❌	❌
onAuxClick	❌	❌	#38
onBeforeInput (input)	❌	❌	#38
onBeforeInput (select)	❌	❌	#38
onBeforeInput (textarea)	❌	❌	#38
onBlur	❌	❌	#38
onChange (input)	✅	✅	#38
onChange (select)	❌	❌	#38
onChange (textarea)	✅	✅	#38
onClick	❌	❌	#38
onContextMenu	❌	❌	#38
onCopy	❌	❌	#38
onCut	❌	❌	#38
onError (img)	🟡	🟡	#38
onFocus	❌	❌	#38
onGotPointerCapture	✅	✅	#38
onInput (input)	🟡	🟡	#38
onInput (select)	❌	❌	#38
onInput (textarea)	🟡	🟡	#38
onInvalid (input)	❌	❌	#38
onInvalid (select)	❌	❌	#38
onInvalid (textarea)	❌	❌	#38
onKeyDown	🟡	🟡	#38
onKeyUp	❌	❌	#38
onLoad (img)	🟡	🟡	#38
onLostPointerCapture	✅	✅	#38
onPaste	❌	❌	#38
onPointerCancel	✅	✅	#38
onPointerDown	✅	✅	#38
onPointerEnter	✅	✅	#38
onPointerLeave	✅	✅	#38
onPointerMove	✅	✅	#38
onPointerOut	✅	✅	#38
onPointerOver	✅	✅	#38
onPointerUp	✅	✅	#38
onSelect	❌	❌	#38
onSelectionChange	❌	❌	#38
open (dialog)	❌	❌
placeholder (input)	🟡	🟡
placeholder (textarea)	🟡	🟡
readOnly (input)	🟡	🟡
readOnly (textarea)	🟡	🟡
referrerPolicy (a)	❌	❌
referrerPolicy (img)	🟡	🟡
rel (a)	❌	❌
required (input)	❌	❌
required (select)	❌	❌
required (textarea)	❌	❌
role	🟡	🟡
rows (textarea)	🟡	🟡
selected (option)	❌	❌
spellCheck (input)	❌	❌
spellCheck (textarea)	❌	❌
src (img)	🟡	🟡
srcSet (img)	🟡	🟡
step (input)	❌	❌
style	🟡	🟡
tabIndex	🟡	🟡
target (a)	❌	❌
type (button)	❌	❌
type (input)	🟡	🟡
value (input)	✅	✅
value (textarea)	✅	✅
width (img)	🟡	🟡

实例	Android	iOS	问题 #
Node.DOCUMENT_NODE	✅	✅
Node.DOCUMENT_POSITION_CONTAINED_BY	✅	✅
Node.DOCUMENT_POSITION_CONTAINS	✅	✅
Node.DOCUMENT_POSITION_DISCONNECTED	✅	✅
Node.DOCUMENT_POSITION_FOLLOWING	✅	✅
Node.DOCUMENT_POSITION_PRECEDING	✅	✅
Node.ELEMENT_NODE	✅	✅
Node.TEXT_NODE	✅	✅
Node.childNodes	✅	✅
Node.compareDocumentPosition()	✅	✅
Node.contains()	✅	✅
Node.firstChild	✅	✅
Node.getRootNode(options)	✅ 部分	✅ 部分
Node.hasChildNodes()	✅	✅
Node.isConnected	✅	✅
Node.lastChild	✅	✅
Node.nextSibling	✅	✅
Node.nodeName	✅	✅
Node.nodeType	✅	✅
Node.nodeValue	✅	✅
Node.parentElement	✅	✅
Node.parentNode	✅	✅
Node.previousSibling	✅	✅
Node.textContent	✅	✅
Element.childElementCount	✅	✅
Element.children	✅	✅
Element.clientHeight	✅	✅
Element.clientLeft	✅	✅
Element.clientTop	✅	✅
Element.clientWidth	✅	✅
Element.computedStyleMap()	❌	❌
Element.firstElementChild	✅	✅
Element.getAttribute()	❌	❌
Element.getBoundingClientRect()	✅	✅
Element.getClientRects()	❌	❌
Element.hasAttribute()	❌	❌
Element.hasPointerCapture()	✅	✅
Element.id	✅	✅
Element.lastElementChild	✅	✅
Element.nextElementSibling	✅	✅
Element.previousElementSibling	✅	✅
Element.releasePointerCapture()	✅	✅
Element.scroll()	❌	❌
Element.scrollBy()	❌	❌
Element.scrollHeight	✅	✅
Element.scrollIntoView()	❌	❌
Element.scrollLeft	✅	✅
Element.scrollTo()	❌	❌
Element.scrollTop	✅	✅
Element.scrollWidth	✅	✅
Element.setPointerCapture()	✅	✅
Element.tagName	✅	✅
HTMLDialogElement.close()	❌	❌
HTMLDialogElement.open	❌	❌
HTMLDialogElement.returnValue	❌	❌
HTMLDialogElement.show()	❌	❌
HTMLDialogElement.showModal()	❌	❌
HTMLElement.blur()	✅	✅
HTMLElement.click()	❌	❌
HTMLElement.focus(options)	✅（无选项）	✅（无选项）
HTMLElement.hidden	❌	❌
HTMLElement.offsetHeight	✅	✅
HTMLElement.offsetLeft	✅	✅
HTMLElement.offsetParent	✅	✅
HTMLElement.offsetTop	✅	✅
HTMLElement.offsetWidth	✅	✅
HTMLImageElement.complete	❌	❌
HTMLImageElement.currentSrc	❌	❌
HTMLImageElement.naturalHeight	❌	❌
HTMLImageElement.naturalWidth	❌	❌
HTMLInputElement.disabled	❌	❌
HTMLInputElement.select()	❌	❌
HTMLInputElement.selectionDirection	❌	❌
HTMLInputElement.selectionEnd	❌	❌
HTMLInputElement.selectionStart	❌	❌
HTMLInputElement.setSelectionRange()	❌	❌
HTMLInputElement.showPicker()	❌	❌
HTMLInputElement.value	❌	❌
HTMLTextAreaElement.disabled	❌	❌
HTMLTextAreaElement.select()	❌	❌
HTMLTextAreaElement.selectionDirection	❌	❌
HTMLTextAreaElement.selectionEnd	❌	❌
HTMLTextAreaElement.selectionStart	❌	❌
HTMLTextAreaElement.setSelectionRange()	❌	❌
HTMLTextAreaElement.value	❌	❌