MrG*_*Man 4 javascript reactjs
如果我想使用不是单个页面的reactjs来创建Web应用程序。我是否应该将所有的React代码编译到一个文件中并将其加载到应用程序的所有页面上，然后使用我公开的函数来呈现必要的组件？
html文件示例
<div id="Clock" data-react="Clock"></div>
<div id="HelloWorld" data-react="HelloWorld"></div>
index.js的示例
import React from 'react';
import ReactDOM from 'react-dom';
import Clock from './Clock';
import HelloWorld from './HelloWorld';
import OtherComponent from './OtherComponent';
const APPS = {
Clock,
HelloWorld,
OtherComponent
};
const MyReactRender = react => {
let component = react.getAttribute('data-react');
let App = APPS[component];
if(App != undefined) {
ReactDOM.render(<App />, document.getElementById(component));
}
}
document.querySelectorAll('[data-react]').forEach(MyReactRender);
我会看到两种提高质量和难度的方法。在这两种情况下，您都可以使用良好的旧的anchor元素将页面重定向到与不同模板对应的URL。
在这种情况下，每个模板都包含相同的javascript捆绑包，其中包含应用程序中的所有内容以及一个ID对应于特定组件的单个元素。这个想法是检查页面中是否存在某个元素，然后激活相应的react组件（如果存在）。
if (document.getElementById('component-root')) {
ReactDOM.render(<Component />, document.getElementById('component-root'));
}
从好的方面来说，它很容易实现。不利的一面是，捆绑包将永远变得越来越大，每次添加新的“页面”时，ifs的列表就会增加。
存在不同的捆绑软件管理器，但是我建议使用Webpack创建仅包含应用程序特定部分的多个捆绑软件。然后，每个模板仅包含相应的div元素以及该特定的bundle。
<head><script src="/js/clock.js"></head>
<body><div id="root-clock"></div></body>
<head><script src="/js/otherComponent.js"></head>
<body><div id="root-other-component"></div></body>
如何使用webpack打包多个捆绑软件不在此答案的范围内，但请参见此处。
| 归档时间： |
|
| 查看次数： |
1104 次 |
| 最近记录： |