dom-ready-event in Reagieren

Habe ich einige Komponenten, wie unten:

Wrapper: wrap-Loader und Seite

Loader: einige Animations -

Seite: Seite Inhalt

code wie folgt:

<body>
  <div id="app"></div>
</body>

class Loader extends Component {}

class Page extends Component {}

class Wrapper extends Component {
    render() {
        return (
            <Loader/>
            <Page />
        );
    }
}

ReactDOM.render(<Wrapper />, document.getElementById('app'));

Möchte ich ausblenden Loader und zeigen Komponente " Seite nach DOM hat compeletely geladen.

Wie soll ich schreiben-dom-ready-event in Reagieren?

wie jQuery: $(window).on('ready')

InformationsquelleAutor lam | 2016-07-29
  1. 15

    TL;DR Wenn ich das richtig verstehe, die Antwort ist wohl "nicht möglich". Aber es gibt eine andere Lösung...

    Hier ist, was ich glaube, was man versucht zu tun, beschrieben als eine Reihe von Schritten:

    1. Seite zu laden anfängt, <Loader /> - Komponente zeigt eine "Seite wird geladen" - animation

    2. Seite fertig geladen ist, <Loader /> - Komponente entfernt (oder versteckt) und <Page /> Komponente eingefügt wird (oder gezeigt) mit dem "echten" Inhalt der Seite.

    Hier ist das problem: denken Sie daran, dass Sie injizieren Ihr Reagieren Komponenten in der Seite wie diese:

    ReactDOM.render(<Wrapper />, document.getElementById('app'));

    Kann man eigentlich nicht Spritzen, ein Reagieren Komponente, bis das DOM geladen ist. Also zu der Zeit, entweder <Loader /> erscheint für etwa 2 Millisekunden und verschwindet, oder es erscheint nicht bei allen (da der DOM bereits geladen ist, durch die Zeit, es wird injiziert in die Seite).

    Werden, wenn Sie versuchen zu zeigen, ein pulsierendes oder andere einfache animation (wie ein animiertes GIF), ich würde versuchen, einen hybrid-Ansatz:

    Einrichten Ihrer HTML so:

    <body>
    <div id="app"><img src="throbber.gif" /></div>
</body>

    In Ihr script-tag, zählen ein JQuery - "document ready" event-handler zu laden, das React-Komponente:

    class Page extends Component {}

class Wrapper extends Component {
    render() {
        return (
            <Page />
        );
    }
}

$(document).ready(function () {
    ReactDOM.render(<Wrapper />, document.getElementById('app'));
});

    Bemerken, dass ich Links aus der <Loader /> - das pulsierendes Bild ist dabei die Arbeit, die der loader.

    Die Idee hier ist, dass, während eine Seite geladen, die pulsierendes GIF pochende Weg, bis das DOM geladen ist, an welcher Stelle die JQuery document ready " - Ereignis werden-Feuer & den Inhalt der div#app ersetzt werden.

    Habe ich noch nicht ausprobiert, aber es sollte arbeiten, vorausgesetzt, Sie Reagieren eigentlich ersetzt den Inhalt div#app anstatt nur anfügen Zeug zu. Wenn das nicht der Fall ist, dann ist es einfach eine Frage der änderung der document-ready-handler, so etwas wie dieses:

    $(document).ready(function () {
    $('div#app img').remove();
    ReactDOM.render(<Wrapper />, document.getElementById('app'));
});
    • Dies funktioniert, Reagieren wird, ersetzen Sie den Inhalt des mount-Punkt. Es ist wichtig, dass alle CSS-loader hängt davon ab, vorhanden sind, bevor Sie Reagieren mounts obwohl, so ein inline - <style> block mit gerade genug, CSS für das erste Rendern könnte in Ordnung sein.
    InformationsquelleAutor Kryten
Schreibe einen Kommentar