在非react网页中呈现react应用程序

IT技术 javascript html reactjs
2021-04-25 16:10:40

我想知道是否可以在非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/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>

但我想知道是否可以将我的 React 应用程序放在相同的路径中，例如，

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

作为我的网络应用程序并加载/导入它并尽可能将一些值作为props传递给它。我以前从未做过这样的整合，任何有关其可行性/方法的帮助将不胜感激。

非常感谢

1个回答

有关此答案的更多上下文，请参阅问题评论

索引.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>

索引.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)
    )
}

应用程序.js

import React from 'react'

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

这仅具有 redux 集成，因为它创建了一个商店并将应用程序包装在Provider.

我使用 webpack to bundle 和 webpack-dev-server 来测试这个。

其它你可能感兴趣的问题
上一篇reactjs从父组件调用子组件方法 下一篇填充不会到达支撑物的周长 (Simplify3D)