Question

我创建了一个带有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，我需要配置一个商店。我应该在哪里做？

Answer 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))

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

1 个答案: