如何在Lit组件中导入并渲染React组件？

核心思路 #

React组件依赖自身的渲染机制，无法直接在Lit的render()模板中使用（Lit模板仅识别原生DOM元素/自定义元素）。必须通过ReactDOM将React组件挂载到Lit组件内部预留的DOM节点上，同时配合Lit的生命周期钩子管理React组件的挂载、更新与卸载。

具体实现步骤 #

1. 确认依赖安装 #

确保项目已安装react和react-dom：

npm install react react-dom

2. 准备React组件示例 #

以一个简单的带属性的React组件为例：

// MyReactComponent.jsx
import React from 'react';

export function MyReactComponent({ name }) {
  return <div>Hello from React, {name}!</div>;
}

3. 在Lit组件中集成React组件 #

在Lit组件中完成以下操作：

• 在模板里预留用于挂载React的DOM容器
• 在Lit的firstUpdated钩子中初始化React根并挂载组件
• 在属性变化时同步更新React组件的props
• 在组件卸载时清理React根，避免内存泄漏

代码示例：

// MyLitComponent.js
import { LitElement, html } from 'lit';
import { createRoot } from 'react-dom/client';
import { MyReactComponent } from './MyReactComponent.jsx';

export class MyLitComponent extends LitElement {
  static properties = {
    userName: { type: String }
  };

  constructor() {
    super();
    this.userName = 'Guest';
    this.reactRoot = null;
  }

  render() {
    // 预留React挂载容器
    return html`<div id="react-container"></div>`;
  }

  firstUpdated() {
    // 获取容器节点，创建React根并挂载组件
    const container = this.shadowRoot.getElementById('react-container');
    this.reactRoot = createRoot(container);
    this.updateReactComponent();
  }

  updated(changedProperties) {
    // Lit属性变化时，同步更新React组件
    if (changedProperties.has('userName')) {
      this.updateReactComponent();
    }
  }

  updateReactComponent() {
    if (this.reactRoot) {
      this.reactRoot.render(<MyReactComponent name={this.userName} />);
    }
  }

  disconnectedCallback() {
    // 组件卸载时清理React根
    if (this.reactRoot) {
      this.reactRoot.unmount();
    }
    super.disconnectedCallback();
  }
}

customElements.define('my-lit-component', MyLitComponent);

4. 使用集成后的组件 #

在页面中直接使用自定义元素：

<my-lit-component user-name="Vinay"></my-lit-component>

问题原因说明 #

之前无渲染无报错的核心原因：直接将React组件放入Lit模板时，React组件仅作为普通JS对象存在，Lit无法识别并触发React的渲染流程，因此既无输出也无报错。

内容的提问来源于stack exchange，提问作者Vinay Dhakre