如果我想使用 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。
- 手动检查 div id 是否存在
在这种情况下，每个模板都包含相同的 javascript 包，该包包含应用程序中的所有内容以及具有与特定组件对应的 id 的单个元素。这个想法是检查页面中是否存在某个元素，如果存在，则激活其对应的 React 组件。
if (document.getElementById('component-root')) {
ReactDOM.render(<Component />, document.getElementById('component-root'));
}
从好的方面来说，它很容易实现。不利的一面是，捆绑总是会变得越来越大，并且每次添加新“页面”时 ifs 列表都会增加。
- 将您的模块分隔成实际的包
存在不同的包管理器，但我建议使用 Webpack 创建多个仅包含应用程序特定部分的包。然后，每个模板只包含相应的 div 元素，以及那个特定的包。
<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 打包多个 bundle 超出了这个答案的范围，但请看 here .
关于javascript - 在没有路由器组件的情况下使用 React，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46003599/