通用组件(例如,<html.div>)
HTML 组件支持以下通用属性和事件。
概述
HTML 组件在 html
导出上可用(可以别名)。组件属性是严格类型的,如果使用无效值,将提供错误。
有关支持的 HTML 组件的完整列表,请参阅 HTML 兼容性表。
示例
import { html } from 'react-strict-dom';
const Foo = () => {
return (
<html.main>
<html.h1>Title</html.h1>
<html.div>
<html.p>
Paragraph of <html.span>text</html.span> element
</html.p>
</html.div>
</html.main>
)
}
React Strict DOM 元素与 React DOM 中的元素最大的区别之一是 style
属性。 style
属性只接受使用 css
导出的样式,并且可以通过使用数组组合它们来(有条件地)合并这些样式。
import { css, html } from 'react-strict-dom';
const styles = css.create({
avatar: {...},
highlighted: {...}
});
<html.img
style={[
styles.avatar,
highlighted && styles.highlighted
]}
/>
属性
有关下面列出的每个支持的属性的更多详细信息,请参阅相关的 React DOM 文档和MDN 文档。 React Strict DOM 中不支持捕获阶段事件属性。 预计开发人员使用 EventTarget API 来处理捕获阶段。
通用
aria-*
- WAI-ARIA 1.2 非弃用属性。autoCapitalize
autoFocus
children
data-*
data-testid
- 这是一个特殊情况的数据属性,用作测试选择器。dir
elementTiming
enterKeyHint
hidden
id
inert
inputMode
lang
role
- 不支持同义词presentation
,请使用none
。 排除所有作者不应使用的抽象角色。ref
spellCheck
style
- 接受使用css.create()
和css.createTheme()
创建的样式或样式数组。 忽略 Falsey 值。 顺序很重要,后面的声明会覆盖前面的声明。tabIndex
- 仅支持0
和-1
值。
事件
onAuxClick
onBlur
onClick
onContextMenu
onCopy
onCut
onFocus
onFocusIn
onFocusOut
onFullscreenChange
onFullscreenError
onGotPointerCapture
onKeyDown
onKeyUp
onLostPointerCapture
onPaste
onPointerCancel
onPointerDown
onPointerEnter
onPointerLeave
onPointerMove
onPointerOut
onPointerOver
onPointerUp
onScroll
onWheel