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

在不同的非React网页中呈现React应用程序可以通过以下几种方式实现：

使用ReactDOM.render()方法：可以通过在非React网页中引入React和ReactDOM库，并使用ReactDOM.render()方法将React应用程序渲染到指定的DOM节点中。这种方式适用于需要在少量DOM节点中呈现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组件作为自定义元素：可以将React组件封装成自定义元素，然后在非React网页中使用该自定义元素呈现React应用程序。这种方式适用于需要在多个DOM节点中呈现React应用程序的场景。示例代码如下：

// 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 Portals（React门户）：React Portals提供了一种方式，可以将React组件渲染到不同的DOM层次结构中，而不仅仅是直接挂载在根节点下。通过使用React Portals，可以将React应用程序渲染到非React网页中的特定DOM节点中。示例代码如下：

// 引入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);

无论使用哪种方式，在呈现React应用程序时，可以根据具体的需求选择不同的方法。以上示例中的代码仅作为参考，实际应用中可能需要根据情况进行适当的修改和调整。