Question

如果我想使用不是单页的reactjs创建Web应用程序。我应该将所有反应代码编译成单个文件并将其加载到应用程序的所有页面上，然后使用我公开的函数来呈现必要的组件吗？

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);

Answer 1

我会看到两种方式，即提高质量和难度。在这两种情况下，您都可以使用旧的锚点元素将页面重定向到不同模板所对应的URL。

手动检查是否存在divs id

在这种情况下，每个模板都包含相同的javascript包，其中包含应用程序中的所有内容以及一个id与特定组件对应的元素。我们的想法是检查页面中是否存在元素，然后激活其相应的反应组件。

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打包多个包不在本答案的范围内，但请查看here。

Answer 2

我尝试过没有路由器的反应应用程序。我使用三元运算符从组件切换到组件。

// App Component
class App extends Component {
  constructor(props) {
    super(props)

   this.state = {
      inClockComponent: true,
      inHelloWorldComponent: false,
      inOtherComponent: false
   }

  }


 render() {
    const {inClockComponent, inHelloWorldComponent, inOtherComponent} = this.state
    return (
      <div>
      {

      inClockComponent 
        ? <Clock> : inHelloWorldComponent 
          ? <HelloWorld> : inOtherComponent ? <OtherComponent> : 
              <div>No Component Here</div>

      } 
     </div>
  }

您可以从App组件中传递一个功能，该功能会将显示状态更改为App的每个子组件

示例

// in App Component showHelloWorldComponent() { this.setState({ inClockComponent: false, inHelloWorldComponent: true, inOtherComponent: false )} }

您可以将该功能插入到可导航到其他组件的按钮

示例

// in Clock Component render() { return ( <div> <h2>Time is 5:15 P.M.</h2> <button onClick={this.props.showHelloWorldComponent}> Go To Hello World </button> ) }

这是一个混乱的解决方案，我不建议在大型应用程序中使用它，但我希望这能回答你的问题！

使用react而不使用路由器组件

2 个答案: