React Strict DOM

渲染平台原生组件

React Strict DOM 允许您创建在每个平台上看起来和感觉都正确的用户界面。 Web 应用程序呈现为 HTML 并依赖于静态 CSS。原生应用程序看起来和感觉都是原生的，因为 UI 是真正的原生，而不是 Web 视图。

使用严格的 HTML 标记界面

严格的 HTML 组件是类型安全的，与跨平台样式紧密集成，并且排除旧版属性。

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

function Page() {
  return (
    <html.main>
      <html.div>
        <html.label for="name">Name</label>
        <html.input id="name" />
      </html.div>
    </html.main>
  );
}

了解严格的 HTML

使用严格的 CSS 设置组件样式

严格的 CSS 样式提供了一种经过实战检验、可预测、优化的方式来封装 Web 和原生组件的样式。
在 Web 上，它由以下技术提供支持： StyleX.

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

const styles = css.create({
  button: {
    backgroundColor: {
      default: 'lightgray',
      ':hover': 'lightblue'
    },
    paddingBlock: '0.5rem'
    paddingInline: '1rem',
  },
})

function Button(props) {
  return (
    <html.button {...props} style={styles.button} />
  );
}

了解严格的 CSS

逐步采用跨平台

使用特定于平台的文件和包装器组件将跨平台组件引入到您的应用程序中。选择加入特定于平台的文件，以便在需要时使用宿主平台的原生 API。

Button.web.js
import {
  html,
  css
} from 'react-strict-dom'

const styles = css.create({
  button: {
    paddingBlock: '0.5rem'
  }
})

function Button(props) {
  return (
    <html.button
      {...props}
      style={styles.button}
    />
  )
}

Button.native.js
import {
  View,
  StyleSheet
} from 'react-native'

const styles = StyleSheet.create({
  button: {
    paddingVertical: 10
  }
})

function Button(props) {
  return (
    <View
      {...props}
      style={styles.button}
    />
  )
}

添加到您的应用