如何在常规 HTML 页面中引用 React 组件答案

【问题标题】：How do I reference a React component in a regular HTML page如何在常规 HTML 页面中引用 React 组件
【发布时间】：2017-05-31 22:38:14
【问题描述】：

我创建了一个带有 index.html 的 React 应用程序，如下所示：

<!DOCTYPE html!>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="react-container"></div>
    <script type="text/javascript" src="assets/bundle.js"></script>
</body>
</html>

Index.html 引用 index.js（来自 bundle.js），它调用 ReactDOM.render 来渲染应用程序，如下所示：

import React from 'react'
import { render } from 'react-dom'
import App from './components/App'
import { Provider } from 'react-redux'
import configureStore from './redux/configureStore'

render(
    <Provider store={configureStore()}>
        <App />
    </Provider>,
    document.getElementById('react-container')
)

到目前为止一切顺利。但我希望我的组件可以在其他 Web 应用程序中重用。那么我需要做什么呢？

我想我不会在捆绑包中提供 index.html 或 index.js 文件？但是我应该如何在其他 Web 应用程序中引用该组件？我想我需要引用 bundle.js 文件，但是如何指定导入？那么巴别塔呢？还有 React 库？

由于我也在使用 Redux，所以我需要一个 Provider，并且我需要配置一个 store。我应该在哪里做呢？

【问题讨论】：

欢迎来到stackoverflow！您的问题实际上非常广泛，需要许多不同的步骤，有些可能需要不同的技术来做到这一点。我将从medium.com/@lokhmakov/… 开始。至于 redux，我会看看其他 redux 组件包有什么类似github.com/kuy/redux-tooltip 祝你好运，如果您有更具体的问题，请随时回来
你为什么不看看 github 上的许多 react 库之一，看看他们是如何做到的？
为了简化我的问题：我创建了一个带有一个组件的 React 应用程序，我想将它添加到我的非 React 门户网站中。实现这一目标的最简单方法是什么？

标签： reactjs redux

【解决方案1】：

为了能够重用组件，您需要构建它以导出渲染函数。我认为 nwb 很适合你https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb 通过这种方式，您可以构建一个 UMD 模块，该模块导出一个全局变量以与您的脚本标签一起使用和/或将其发布到 npm

我宁愿让 index.js 导出一个组件，而不是使用 ReactDOM 显式呈现它。例如：

export default props =>
   <Provider store={configureStore()}>
      <App />
   </Provider>

并让用户代码将其渲染到 dom

 ReactDOM.render(React.createElement(YourLibraryGlobalNameGeneratedFromNwb))

【讨论】：