Dynamisches JQuery-Menü mit reagieren

Die dynamische Manipulation in React ist mit den Mutationsfunktionen unkompliziert. Erstens, ich denke, Sie haben dies bereits getan, Sie müssen die erforderlichen JQuery-Bibliotheken importieren

import $ from 'jquery';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/menu';

Und Sie müssen Ihr Menü in einer Reaktionskomponente wie unten beschrieben referenzieren. Der dynamische Lebenszyklus wird als Reaktionszustand behandelt ( https://facebook.github.io/react/docs/state-and-lifecycle.html ). Wir verwenden einen Zustand, zum Beispiel menuItems, um die JSON-Objekte/Arrays zu verwalten. Sie sehen, dass die Position auf absolut gesetzt ist. Ohne dies führt Ihr Menü dazu, dass Ihr gesamtes Dokument erweitert wird, es sei denn, dies ist das gewünschte Verhalten.

<ul ref="menu" style={{display: "none", position: "absolute"}}>
    {this.state.menuItems.map(this.processMenuEntry.bind(this, 0))}
</ul>

Die Implementierung der Methode processMenuEntry ist unten. Natürlich können Sie diese Methode aktualisieren, um sie an eine andere JSON-Struktur anzupassen. Ich würde eine kleine Änderung empfehlen, um className zu verwenden: "ui-state-disabled" anstelle von disabled: true. Daher haben Sie mehr Möglichkeiten, Ihre Stile anzupassen, als nur die Aktivierung/Deaktivierung. Die folgende Methode geht von verschachtelten Ebenen aus, die mit Null beginnen, wie beim ersten Aufruf im obigen Ausschnitt. Und es ist wichtig, einer untergeordneten Komponente einen Schlüssel zuzuweisen.

processMenuEntry(level, entry, idx){
        let id= "menu"+ level+ "_"+ idx;

        if(!entry.className){
            entry.className= "";
        }

        let children= entry.children;
        let child;
        if(children && children.length){
            child= <li className= {entry.className} key= {id}><div>{entry.label}</div><ul>{children.map(this.processMenuEntry.bind(this, level+1))}</ul></li>;
        }else{
            child= <li className= {entry.className} key= {id}><div>{entry.label}</div></li>;
        }

        return child;
}

Stellen Sie in Ihrem Konstruktor sicher, dass dieser Aufruf erfolgt, damit Ihre Methode den gleichen Kontext wie Ihre Reaktionskomponente in HTML hat

this.processMenuEntry= this.processMenuEntry.bind(this);

Fügen Sie dieses Code-Snippet in Ihrem componentDidMount hinzu, um die Menü-API zusätzlich zu Ihrem Klick-Handler zu starten.

componentDidMount(){
        $(this.refs.menu).menu({
            select: function( event, ui ) {
                //do 
            }
        });
}

Wenn Sie nun beispielsweise den zweiten Punkt in Ihrem Menü deaktivieren möchten, können Sie dies einfach tun.

simple[1].className= "ui-state-disabled";
this.setState({"menuItems": simple});

Sie können auch ein ganz anderes JSON-Array einstellen, und React kümmert sich darum

this.setState({"menuItems": [{
    label: "Some new Item1"
}]}); 

Die Verwendung von "-" als Label fügt Ihrem Menü ein Trennzeichen hinzu, wie die JQuery-Menü-API entworfen wurde.

Schließlich können Sie sich in Bezug auf die Handhabung des Umschalters Ihres Menüs oder das Ausblenden des Menüs, wenn Sie außerhalb des Menüs klicken, den folgenden Ausschnitt ansehen. Natürlich können Sie es basierend auf Ihrer Arbeit ändern. Ich gehe weiter unten davon aus, dass wir das Menü umschalten, wenn wir auf einen Anker klicken. Die Prüfung, ob der Benutzer außerhalb des Menüs geklickt hat, wird nur hinzugefügt, wenn das Menü sichtbar ist.

<a href="https://stackoverflow.com" onClick={this.toggleMenu}>Test</a>

componentWillUnmount(){
    this.stopMenuListeners();
}

stopMenuListeners(){
    $(document).off("click.menuOutsideClicks");
}

toggleMenu(event){
        let menu= $(this.refs.menu);
        let visible= !menu.is(':visible');
        menu.slideToggle("fast");

        this.stopMenuListeners();
        if(visible){
            setTimeout(()=>{
                this._handler= $(document).on("click.menuOutsideClicks", (event)=>{
                    if(!$(event.target).closest(menu).length){
                        menu.slideUp('slow').hide();
                        this.stopMenuListeners();
                    }
                });
            });
        }

        event.stopPropagation();
        event.preventDefault();
}