如何在另一个项目中使用React应用程序（例如Facebook Messenger）？

Question

我想在另一个不在React中的项目中使用我在React中创建的应用程序。

如何在其他项目中创建应用程序的新实例？像这样：

let ReactApp = new ReactApp()

有什么提示吗？我必须以某种方式构建它吗？

Answer 1

在您的React应用中，当您这样做时：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

它的作用是：

1. 计算react应用（您好，世界！）
2. 将结果放入ID为“ #root”的DOM元素

您可以随时随地在多个DOM元素上的任何网页上调用ReactDOM.render（）。并且每次都会在您的DOM中创建您的React App的新版本。

---

如果您想导出React应用程序以便能够在其他地方使用它，我建议您导出主要的React组件。然后从其他项目导入它，并在其上调用ReactDOM.render：

MyApp.jsx：

const App = () => <h1>Hello, World!</h1>

export default App

MyOtherApp.jsx：

import MyApp from 'my-app'

ReactDOM.render(MyApp, document.getElementBy('sub-part-of-my-other-app'))