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

我已经创建了一个用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，我需要一个提供商，并且需要配置商店。我应该在哪里做？

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

我宁愿将index.js导出一个组件，而不是使用Reactdom明确渲染它。例如：

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

，让用户代码将其渲染到DOM

 ReactDOM.render(React.createElement(YourLibraryGlobalNameGeneratedFromNwb))

相关内容

最新更新

热门标签：