Verwendung reagieren, ohne eine Router Komponente

Wenn ich eine Web-Anwendung mit reactjs machen will, dass nicht eine einzige Seite ist. Sollte ich alle react-Code in einer einzigen Datei kompilieren und laden Sie es auf allen Seiten der Anwendung, dann verwenden Sie die Funktion, die ich verfügbar machen, um die erforderlichen Komponenten zu rendern?Verwendung reagieren, ohne eine Router Komponente

Beispiel einer HTML-Datei

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

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

Quelle

2017-09-01 MrGilbertMan

Ich würde einfach mit 'if (document.getElementById ('Clock')) gehen {/ * activate react component * /}' –

Danke für die Eingabe. Aber wäre es richtig, diese Methode zu verwenden, da die Anwendung viel wachsen kann? – MrGilbertMan

Nein, es ist definitiv keine empfohlene Übung, aber die einzigen wirklichen Nachteile sind die Größe des Bündels und eine ständig steigende Anzahl von Wenns. Ein besserer Weg könnte darin bestehen, Webpacks zu verwenden, um verschiedene Teile der Anwendungen zu bündeln und sie nur auf jeder anderen Seite zu laden. –

ich zwei Möglichkeiten sehen würde, der Steigerung der Qualität und Schwierigkeit. In beiden Fällen verwenden Sie gute alte Ankerelemente, um die Seite auf eine URL umzuleiten, der verschiedene Vorlagen entsprechen.

manuell prüfen für die Existenz von divs ids

In diesem Fall wird jede Vorlage die gleiche Javascript-Paket enthält, die mit einer ID entsprechend der spezifischen Komponente alles in der App und ein einzelnes Element enthält. Die Idee besteht darin, zu prüfen, ob ein Element auf der Seite vorhanden ist oder nicht, und dann die entsprechende Reaktionskomponente zu aktivieren, falls dies der Fall ist.

if (document.getElementById('component-root')) { 
    ReactDOM.render(<Component />, document.getElementById('component-root')); 
}

Auf der Seite oben, es ist ganz einfach zu realisieren. Auf der anderen Seite wird das Bündel immer größer und die Liste der ifs wird jedes Mal größer, wenn Sie eine neue "Seite" hinzufügen.

Separate Ihre Module in tatsächlichen Bündel

Verschiedene Bündelmanager existieren, aber ich würde empfehlen, Webpack mit mehreren Bündeln zu erstellen, die nur bestimmten Teil Ihrer Anwendung enthalten. Dann enthält jede Vorlage nur das entsprechende div-Element sowie dieses spezifische Bündel.

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

Wie mehrere Bündel mit webpack aus dem Anwendungsbereich dieser Antwort ist, aber schauen here verpacken.

Quelle

2017-09-01 16:09:42

Ich habe versucht, eine Reaktion Anwendung ohne einen Router zu machen. Ich habe ternäre Operatoren verwendet, um von Komponente zu Komponente zu wechseln.

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

Sie eine Funktion aus der App Komponente passieren könnte, der die Anzeigezustand jedem Kind Bestandteil App

Beispiel auf eine

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

Sie fügen diese Funktion ändern würde Taste, die zu einer anderen Komponente navigieren würde

Beispiel

// in Clock Component 

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

Es ist eine schmutzige Lösung, und ich würde es in einer großen Anwendung nicht den Eindruck erwecken, aber ich hoffe, dass dies Ihre Frage beantwortet!

Quelle

2017-09-01 16:32:38 Tomy

Verwendung reagieren, ohne eine Router Komponente

Antwort

Verwandte Themen