创建组件

了解如何创建和定制跨平台的 React 组件。

导入和导出组件

React Strict DOM 允许你通过在 JavaScript 中编写标记和样式来创建可重用的跨平台 UI 组件。

React Strict DOM 组件是 React DOM 中 HTML 组件的严格子集。 使用跨平台组件的第一步是从包中导入 html 导出。

import { html } from 'react-strict-dom';

然后，自定义组件可以使用 html 对象来呈现各种 HTML 元素。 例如，这是一个呈现跨平台图像元素的 Profile 组件

Profile.js

import { html } from 'react-strict-dom';

export function Profile() {
  return (
    <html.img
      alt={user.name}
      src={user.avatarSrc}
    />
  );
}

React Strict DOM 会自动将 <html.img /> 转换为 Web 上的 <img /> 和 Native 上的 <Image />！

响应事件

React Strict DOM 元素具有事件 props，允许组件响应事件的冒泡阶段。 跨平台事件处理程序将响应用户交互而触发，例如单击、悬停或聚焦表单输入。

Button.js

import { html } from 'react-strict-dom';

export function Button() {
  return (
    <html.button
      onClick={(e) => {}}
    />
  );
}

响应事件的捕获阶段应使用元素实例上的 EventTarget API 来完成。

操作 DOM

有时你可能需要访问 React 管理的元素实例。 例如，聚焦节点、滚动到节点或测量其大小和位置。 要访问 React 管理的节点，请使用 ref 回调

<html.div ref={(node) => {
  const rect = node.getBoundingClientRect;
  return () => {
    // cleanup
  }
}}>

React Strict DOM 不支持手动修改元素，因为这可能会与 React 正在进行的更改发生冲突，并且与 React Native 的不可变模型不兼容。 但是，许多只读 DOM 属性已在 Native 上支持。 了解有关 HTML API的更多信息。

平台特定组件

某些组件可能需要平台特定的差异。 在这些情况下，建议使用平台特定文件。

data-* props 的 Flow 类型

Flow 当前不支持键入任意 data-* props (#71)。 解决方法是使用 Flow libdef 通过 ReactStrictDOMDataProps 类型定义你的应用程序（或依赖项）使用的 data-* props。 例如

// flow-typed/react-strict-dom.js
declare type ReactStrictDOMDataProps = {
  'data-imgperflogname'?: string,
  'data-impression-id'?: number,
};

这是一个临时解决方案，直到 Flow 提供内置方法来处理 data-* prop 类型。 不要使用此解决方法来定义任何非 data-* props。

翻译字符串的 Flow 类型

某些 prop 值通常是面向用户的字符串，这些字符串在 RSD 中定义为 Stringish 类型 - 只是一个 string。 但是，当 Flow 不知道翻译函数在运行时生成字符串时，你可以覆盖 Stringish 的类型来解决这个问题。 例如，如果使用 Meta 的国际化框架 Fbt

// flow-typed/stringish.js
declare type Stringish = string | Fbt;

这与 React Native 使用的方法相同，因此如果你已经重新声明了 Stringish，它将开箱即用地与 RSD 一起使用。

在 React Native 上抑制日志

RSD 提供了全面的运行时警告和错误，以告知开发人员有关 Native 上的 prop 和样式不兼容性。 如果你希望抑制某些日志，可以通过在 Native 应用程序的根目录配置React Native LogBox来完成。 消息遵循一个通用结构，允许进行精确或通用的抑制。 例如

import { LogBox } from 'react-native';

LogBox.ignoreLogs([
  // Specific errors
  '[error] React Strict DOM: css.keyframes() is not supported',
  // Specific warnings
  '[warn] React Strict DOM: unsupported prop "onInvalid"',
  '[warn] React Strict DOM: unsupported style value in "display:inline-flex"',
  // All warnings of a certain kind
  /\[warn\] React Strict DOM: unsupported style property .*/,
  // All warnings
  /\[warn\] React Strict DOM: .*/,
  // All logs
  /\[log\] React Strict DOM: .*/,
]);

仅在万不得已的情况下忽略日志，并创建一个任务来修复被忽略的日志。