如何使用react-to-webcomponent将React组件转为WebComponent并引入使用

你写的转换代码逻辑是正确的 #

你在Header.tsx中添加的转换、自定义元素注册代码核心逻辑没有问题，只需要补全版本兼容、重复注册防护等细节即可正常使用。

完整实现步骤 #

1. 改造Header.tsx文件 #

首先安装依赖：npm i react-to-webcomponent，之后按如下结构修改Header.tsx，注意适配React版本差异：

import React from 'react';
// React 18 从react-dom/client导入createRoot，React 17及以下直接从react-dom导入ReactDOM即可
import ReactDOM from 'react-dom/client';
import reactToWebComponent from 'react-to-webcomponent';

// 你原本的Header组件业务逻辑，不需要改动
const Header = () => {
  return (
    <header className="app-header">
      {/* 原有头部内容 */}
    </header>
  )
}

// 转换为WebComponent类
const HeaderWebComp = reactToWebComponent(Header, React, ReactDOM, {
  // React 18 必须配置createRoot，否则会报ReactDOM.render废弃警告
  createRoot: (container: HTMLElement) => ReactDOM.createRoot(container),
  // 如果不需要Shadow DOM样式隔离、需要和外层DOM环境打通，可设置shadow: false
  // shadow: false
})

// 注册自定义元素，加判断避免重复导入/热更新时触发重复注册报错
if (!customElements.get('my-header')) {
  customElements.define('my-header', HeaderWebComp)
}

// 保留原有默认导出，方便其他场景直接作为React组件引用
export default Header

2. 完成WebComponent注册与导入 #

不需要额外做全局注册操作，自定义元素的注册逻辑会在模块导入时自动执行：

• 你可以直接在项目入口文件（main.tsx/index.tsx），或者需要使用该组件的App.tsx顶部，导入改造后的Header.tsx文件即可：

// 导入即完成my-header元素的注册，只需要在项目中导入一次
import './components/Header.tsx';
import { ThemeProvider } from 'your-theme-lib';
import theme from './themeConfig';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <my-header />
    </ThemeProvider>
  )
}

export default App

3. 解决TypeScript类型报错 #

如果是TS项目，直接写<my-header />会触发JSX类型错误，需要在项目全局类型声明文件（比如vite-env.d.ts/react-app-env.d.ts）中补充元素声明：

declare namespace JSX {
  interface IntrinsicElements {
    'my-header': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
      // 如果Header需要接收props，可以在这里声明对应属性类型
      // title?: string
    }
  }
}

关键注意事项 #

默认配置下react-to-webcomponent会开启Shadow DOM隔离，且WebComponent内部是独立的React渲染根，外层React树的Context（比如你用的ThemeProvider、Redux、React Router上下文）默认无法穿透到内部的Header组件。如果需要Header消费外层ThemeProvider的主题值，有两种可选方案：

• 转换时设置shadow: false关闭Shadow DOM，同时将ThemeProvider包裹逻辑移入Header组件内部，通过props传入theme配置
• 不使用内置的渲染逻辑，通过React Portal将Header渲染到外层React树中，实现Context共享

启动项目后在开发者工具Elements面板能看到<my-header>标签正常渲染内部内容，即代表注册生效。

内容的提问来源于stack exchange，提问作者Sai Krishna