在非反应网页中呈现反应应用 [英] Render a react app in a non react web page
问题描述
我想知道是否可以在非反应网页中呈现整个反应应用程序。我尝试了许多链接，它建议的代码片段如下所示，只显示一个组件，
I was wondering if its possible to render an entire react app in a non react web page. I tried many links where it suggested code snippets as follows which shows to render just a component,
<!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>
但我想知道是否有可能让我的反应应用程序在同一条路径中，
But i want to know is its possible to have my react app in the same path like,
- htdocs
- plainhtmljswebapp.html
- react-app-folder
- index.html
- main.js
- src
- components
- actions
- reducers
- package.json
- webpack.config.js
作为我的网络应用并加载/导入它并传递一些值作为道具，如果可能的话。我以前从未做过这样的整合，对其可行性/方法的任何帮助都会非常感激。
as my web app and load/ import it and pass it some values as props if its possible. I have never done such integration before and any help on its feasibility/ approach would be much appreciated.
非常感谢
推荐答案
有关此答案的更多背景信息，请参阅问题评论
<!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
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
app.js
import React from 'react'
export const App = ({ text }) => {
return (
<div>{text}</div>
)
}
只有在创建商店并将应用程序包装在 Provider <中时才会进行redux集成/ code>，但是我看不出为什么它不能正常工作的原因。
This only has redux integration in so far as it creates a store and wraps the app in a Provider, but I can't see any reason why it wont work like normal from there.
我使用webpack测试了这个以及bundle和webpack-dev - 服务器。
I tested this using webpack to bundle and webpack-dev-server to serve.
这篇关于在非反应网页中呈现反应应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
