Question

我已经使用create-react-app项目构建了一个React应用程序。现在，我不得不在非React应用程序中使用该项目中的某些组件。因此，我将不得不将这些组件单独导出到单独的js文件中，这些文件可以通过引用我的js文件和react库而在普通JS应用程序（不带webpack）中使用。

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

我用Google搜索，但没有发现与我的案件有关的任何内容。有人可以对这个问题有所了解吗？

[更新]

当我说非反应应用程序时，表示当前该应用程序未使用React或Webpack。但是，当然，我将在页面中包含组件的页面中直接使用script标签直接包含react库。

这个问题最主要的是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>

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

1 个答案: