在没有路由器组件的情况下使用反应

如果我想使用reactjs制作不是单个页面的Web应用程序。我应该将所有反应代码编译成单个文件并将其加载到应用程序的所有页面上，然后使用我公开的函数来渲染必要的组件？在没有路由器组件的情况下使用反应

例如HTML文件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);

来源

2017-09-01 MrGilbertMan

我只想用'if（document.getElementById（'Clock'））{/ *激活反应组件* /}' –

感谢您的输入。但是，使用这种方法是否正确，因为应用程序可以增长很多？ – MrGilbertMan

不，这绝对不是一个推荐的做法，但唯一真正的缺点是捆绑包的大小和ifs的数量不断增加。更好的方法是使用webpack捆绑应用程序的不同部分，并只将它们加载到每个不同的页面中 –

的

<div id="Clock" data-react="Clock"></div> 
<div id="HelloWorld" data-react="HelloWorld"></div>

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

手动检查的div的ID的

在这种情况下，每个模板包括含有在该应用中，并与对应于该特定部件的ID的单个元件都相同的javascript束的存在。这个想法是检查页面中是否存在元素，如果是，则激活其相应的反应组件。

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是出于这个答案的范围，但看here。

来源

2017-09-01 16:09:42

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

// 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> 
) 
}

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

来源

2017-09-01 16:32:38 Tomy

在没有路由器组件的情况下使用反应

回答

相关问题