如何为非反应应用程序构建反应组件

Question

我使用 create-react-app 项目构建了一个反应应用程序。现在我不得不在非反应应用程序中使用这个项目中的一些组件。所以我必须将这些组件单独导出到单独的 js 文件中，这些文件可以通过引用我的 js 文件和 react 库在普通 JS 应用程序（没有 webpack）中使用。

我尝试从 create-react-app 中弹出并将我的组件和相关文件导出为单独的块。然后我通过使用“脚本”标签的直接引用将这些组件包含在目标应用程序中。之后我不确定如何挂载我的组件，因为我的组件将被一些与 webpacks 相关的导出语句包装，并且在目标应用程序中我没有使用 webpack 或需要 js。

我用谷歌搜索并没有发现任何与我的案例相关的信息。有人可以对这个问题有所了解吗？

[更新]

当我说非反应应用程序时，这意味着当前应用程序没有使用 React 或 webpack。但是，我当然会在要包含组件的页面中直接使用脚本标记包含反应库。

这个问题主要与 Webpack 相关，而不是 React。我想获取包含在 webback 相关功能下的组件的参考。如果我能得到那个参考，那么我就知道如何使用 React 库来渲染组件了。

Answer 1

window 可用于存储您希望在导入脚本之间共享的变量。

虽然，重要的是要注意不要污染命名空间。

请参阅下面的实际示例。

// Window.components.
window.components = window.components || {}

// Component.
window.components.Component = props => <div>React Component</div>

// Mount.
ReactDOM.render(<window.components.Component/>, document.querySelector('#root'))

// Window Proof.
console.log(window.React, window.ReactDOM)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div>
  Regular HTML
  <div id="root"></div>
</div>