在非反应网页中呈现反应应用程序答案

【问题标题】：Render a react app in a non react web page在非反应网页中呈现反应应用程序
【发布时间】：2017-04-18 06:08:02
【问题描述】：

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

<!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

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

非常感谢

【问题讨论】：

为什么你不能只 iframe 反应部分？
@A.Lau 我需要将一些值作为道具从网络应用程序传递给反应应用程序的原因..据我所知，这对于 iframe 来说是不可能的
我不明白为什么不这样做。 ReactDOM.render 会将任何组件渲染到 div，因此您可以将其包装在一个函数中，以向其传递一些自定义道具导入您像平常一样捆绑并在 script 标记中调用该函数。
@MichaelPeyper 该应用程序是否可以使用 redux 状态？
再说一次，我不明白为什么不这样做。如果我有时间，我会为你拼凑一个简单的例子，然后发布一个答案。

标签： javascript html reactjs

【解决方案1】：

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

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

就它创建商店并将应用程序包装在Provider 中而言，这仅具有 redux 集成，但我看不出它无法正常工作的任何原因。

我使用 webpack 来打包和 webpack-dev-server 来提供服务。

【讨论】：

这是一个很好的解决方案。我明白你在那里做了什么。您正在将mount 函数绑定到window，其中包含render，以便可以在html 中调用它。非常感谢:)
问题我无法在我的应用程序中完成这项工作。如果调用 mount 函数两次会发生什么.. mount("content1", "testing") mount("content1", "xx testing") -> ??假设挂载函数在 ajax 响应中……基于用户点击……
我还没有测试过，但render 可能会延迟，并且应该在后续调用中替换 div 中的内容，即第二个 mount 调用应该覆盖第一个。请注意，在显示的示例中，这将创建一个新的 tee redux 存储，因此如果您希望状态保持不变，则需要进行一些更改（例如，通过 div id 缓存存储）。