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

在非反应网页上渲染反应应用,第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进行了测试。



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5016250.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-15
下一篇 2022-11-14

发表评论

登录后才能评论

评论列表(0条)

保存