Question

我想知道是否可以在非反应网页中呈现整个反应应用程序。我尝试了很多链接，它建议的代码片段如下所示，它只显示一个组件，

<!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/babel-standalone@6.15.0/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>

但我想知道是否有可能将我的反应应用程序放在相同的路径中，如

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

作为我的网络应用程序并加载/导入它并传递一些值作为道具，如果可能的话。我以前从未做过这样的整合，对其可行性/方法的任何帮助都会非常感激。

非常感谢

Answer 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对bundle和webpack-dev-server进行了测试。

在非反应网页中呈现反应应用

1 个答案:

的index.html

index.js

app.js