在多页应用程序中使用React
我一直在玩React，到目前为止我真的很喜欢它。我正在使用NodeJS构建一个应用程序，并希望使用React来实现应用程序中的一些交互式组件。我不想让它成为单页应用程序。
我还没有在网上找到任何可以回答以下问题的东西：
如何在多页应用程序中拆分或捆绑React组件？
目前，我的所有组件都在一个文件中，即使我可能永远不会在应用程序的某些部分加载它们。
到目前为止，我正在尝试使用条件语句通过搜索React将呈现的容器的ID来呈现组件。我不是100%确定React的最佳实践是什么。它看起来像这样。
if(document.getElementById('a-compenent-in-page-1')) {
React.render(
<AnimalBox url="/api/birds" />,
document.getElementById('a-compenent-in-page-1')
);
}
if(document.getElementById('a-compenent-in-page-2')) {
React.render(
<AnimalBox url="/api/cats" />,
document.getElementById('a-compenent-in-page-2')
);
}
if(document.getElementById('a-compenent-in-page-3')) {
React.render(
<AnimalSearchBox url="/api/search/:term" />,
document.getElementById('a-compenent-in-page-3')
);
}我仍然在阅读文档，还没有找到我需要的多页应用程序。
提前谢谢。
回答 7
Stack Overflow用户
发布于 2016-10-09 02:33:46
目前，我正在做类似的事情。
这个应用程序不是一个完整的React应用程序，我正在使用React来处理动态内容，比如CommentBox，它是自动生成的。并且可以包含在具有特殊参数的任何点上。
但是，我的所有子应用都被加载并包含在一个文件all.js中，所以浏览器可以跨页面缓存它。
当我需要在SSR模板中包含一个应用程序时，我只需要包含一个带有"__ React -root“类的DIV和一个特殊的ID (要呈现的React应用程序的名称)
逻辑非常简单：
import CommentBox from './apps/CommentBox';
import OtherApp from './apps/OtherApp';
const APPS = {
CommentBox,
OtherApp
};
function renderAppInElement(el) {
var App = APPS[el.id];
if (!App) return;
// get props from elements data attribute, like the post_id
const props = Object.assign({}, el.dataset);
ReactDOM.render(<App {...props} />, el);
}
document
.querySelectorAll('.__react-root')
.forEach(renderAppInElement)<div>Some Article</div>
<div id="CommentBox" data-post_id="10" class="__react-root"></div>
<script src="/all.js"></script>编辑
由于webpack完美地支持代码拆分和LazyLoading，我认为包含一个示例是有意义的，在这个示例中，您不需要在一个捆绑包中加载所有应用程序，而是将它们拆分并按需加载。
import React from 'react';
import ReactDOM from 'react-dom';
const apps = {
'One': () => import('./One'),
'Two': () => import('./Two'),
}
const renderAppInElement = (el) => {
if (apps[el.id]) {
apps[el.id]().then((App) => {
ReactDOM.render(<App {...el.dataset} />, el);
});
}
}Stack Overflow用户
发布于 2017-01-26 00:53:08
您可以在webpack.config.js文件中为应用程序提供几个入口点：
var config = {
entry: {
home: path.resolve(__dirname, './src/main'),
page1: path.resolve(__dirname, './src/page1'),
page2: path.resolve(__dirname, './src/page2'),
vendors: ['react']
},
output: {
path: path.join(__dirname, 'js'),
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
},
}然后，在src文件夹中可以有三个不同的html文件，以及它们各自的js文件(例如page1)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 1</title>
</head>
<body>
<div id="app"></div>
<script src="./vendors.js"></script>
<script src="./page1.bundle.js"></script>
</body>
</html>JavaScript文件：
import React from 'react'
import ReactDom from 'react-dom'
import App from './components/App'
import ComponentA from './components/ReactComponentA'
ReactDom.render(<div>
<App title='page1' />
<ReactComponentA/>
</div>, document.getElementById('app'))然后可以为每个单独的页面加载不同的React组件。
Stack Overflow用户
发布于 2015-10-26 08:47:23
我正在从头开始构建一个应用程序，并且正在学习，但我认为您正在寻找的是React-Router。React-Router将您的组件映射到特定的URL。例如：
render((
<Router>
<Route path="/" component={App}>
<Route path="api/animals" component={Animals}>
<Route path="birds" component={Birds}/>
<Route path="cats" component={Cats}/>
</Route>
</Route>
<Route path="api/search:term" component={AnimalSearchBox}>
</Router>
), document.body)在搜索案例中，'term‘可以作为AnimalSearchBox中的一个属性进行访问：
componentDidMount() {
// from the path `/api/search/:term`
const term = this.props.params.term
}试一试。就我对这个主题和其他相关主题的理解而言，This教程让我名列前茅。
最初的答案如下：
我在这里找到了同样的答案。看看this帖子是否能激发你的灵感。如果您的应用程序类似于我的应用程序，那么它将有一些变化很小的区域，并且只在主体上变化。您可以创建一个小部件，它的职责是根据应用程序的状态呈现不同的小部件。使用flux架构，您可以分派一个导航操作来更改body小部件切换的状态，从而有效地仅更新页面的正文。
这就是我现在正在尝试的方法。
https://stackoverflow.com/questions/31933359
复制相似问题