如何在不同的非react网页中呈现react应用程序？

// 引入React和ReactDOM库
import React from 'react';
import ReactDOM from 'react-dom';

// React应用程序组件
const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

// 渲染React应用程序到指定的DOM节点
ReactDOM.render(<App />, document.getElementById('root'));

// React应用程序组件
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

// 将React组件作为自定义元素
customElements.define('react-app', ReactElementWrapper(App));

// 在非React网页中使用自定义元素呈现React应用程序
const reactAppElements = document.querySelectorAll('react-app');
reactAppElements.forEach((element) => {
  ReactDOM.render(<App />, element);
});

// 自定义元素包装器函数
function ReactElementWrapper(ReactComponent) {
  return class extends HTMLElement {
    connectedCallback() {
      ReactDOM.render(<ReactComponent />, this);
    }
  };
}

// 引入React和ReactDOM库
import React from 'react';
import ReactDOM from 'react-dom';

// React应用程序组件
const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

// 创建一个新的DOM节点用于渲染React应用程序
const reactAppContainer = document.createElement('div');

// 渲染React应用程序到新的DOM节点
ReactDOM.render(<App />, reactAppContainer);

// 将新的DOM节点插入到非React网页中的特定位置
const targetNode = document.getElementById('react-app-container');
targetNode.appendChild(reactAppContainer);