跳至主要内容

通用组件(例如,<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