在非反应网页上渲染反应应用

小编典典

在非反应网页上渲染反应应用

reactjs

我想知道是否有可能在非React网页中呈现整个React应用。我尝试了许多建议代码段的链接，如下所示，这些代码段仅显示了一个组件，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="https://unpkg.com/react@latest/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
      </head>
    <body>
        <div id="root">
        <h1>POC</h1>


    </body>
    <script type="text/babel">
        class Application extends React.Component {
            render() {
                //debugger             
                console.log('hi there')
                return (
                    <div>
                        <h1>hello world</h1>
                    </div>
                );
            }
        }

        ReactDOM.render(<Application />, document.getElementById('root'));
    </script>
</html>

但我想知道是否有可能让我的React应用程序走上同样的路，

- htdocs
    - plainhtmljswebapp.html
    - react-app-folder
        - index.html
        - main.js
        - src
            - components
            - actions
            - reducers
        - package.json
        - webpack.config.js

作为我的网络应用程序，然后加载/导入它，并在可能的情况下将其作为道具传递一些值。我以前从未进行过这样的集成，因此对其可行性/方法的任何帮助将不胜感激。

非常感谢

阅读 221

2020-07-22

共1个答案

小编典典

有关此答案的更多背景信息，请参阅问题评论

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script type="text/javascript" src="/bundle.js"></script>
    </head>
    <body>
        <div id="content1">
        </div>
        <script type="text/javascript">
            mount("content1", "testing")
        </script>

        <div id="content2">
        </div>
        <script type="text/javascript">
            mount("content2", "more testing")
        </script>
    </body>
</html>

index.js

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { App } from './app'

window.mount = function(id, customText) {
    const store = createStore((state = {}) => state)
    render(
        <Provider store={store}>
            <App text={customText} />
        </Provider>, 
        document.getElementById(id)
    )
}

app.js

import React from 'react'

export const App = ({ text }) => {
    return (
        <div>{text}</div>
    )
}

它仅在创建商店并将应用程序包装在中的情况下才具有redux集成Provider，但是我看不出任何原因无法从那里正常运行。

我使用webpack捆绑和webpack-dev-server进行了测试。

2020-07-22