Wie man reactive.js zusammen mit demb spielen kann, zeigt Modalform

Kurz gesagt, du machst das falsch und dies ist nicht ein Fehler in reagieren.

Wenn Sie jede Art von plugin, das ändert reagieren die Komponente dom-Knoten, dann ist es zu brechen, Dinge in die eine oder andere Weise.

Was Sie tun sollten stattdessen ist, reagieren mit sich selbst, und Ergänzende css, um die position der Komponente in der Weise, die Sie gerne für Ihr modales Dialogfeld.

Ich würde vorschlagen, erstellen Sie eine Komponente, die verwendet wird, reagieren die statics Komponente Eigenschaft zu definieren, die ein paar Funktionen Verpackung renderComponent zu geben, Ihnen eine schöne, saubere Funktion aufrufen, um ein-oder ausblenden einen dialog reagieren. Hier ist ein cut-down-Beispiel für etwas, was ich in der Vergangenheit verwendet habe. NB: Es tut jQuery verwenden, aber Sie könnten ersetzen das jQ mit standard js-api-Aufrufe an Dinge wie elementById und etc, wenn Sie nicht wollen, dass der jQuery-code.

window.MyDialog = React.createClass({
    propTypes: {
        title:      React.PropTypes.string.isRequired,
        content:    React.PropTypes.string.isRequired
    },
    statics: {

        //open a dialog with props object as props
        open: function(props) {
            var $anchor = $('#dialog-anchor');
            if (!$anchor.length) {
                $anchor = $('<div></div>')
                    .prop('id', 'dialog-anchor');
                    .appendTo('body');
            }
            return React.renderComponent(
                MyDialog(props),
                $anchor.get(0)
            );
        },

        //close a dialog
        close: function() {
            React.unmountComponentAtNode($('#dialog-anchor').get(0));
        }
    },

    //when dialog opens, add a keyup event handler to body
    componentDidMount: function() {
        $('body').on('keyup.myDialog', this.globalKeyupHandler);
    },

    //when dialog closes, clean up the bound keyup event handler on body 
    componentWillUnmount: function() {
        $('body').off('keyup.myDialog');
    },

    //handles keyup events on body
    globalKeyupHandler: function(e) {
        if (e.keyCode == 27) { //ESC key

            //close the dialog
            this.statics.close();
        }
    },

    //Extremely basic dialog dom layout - use your own
    render: function() {
        <div className="dialog">
            <div className="title-bar">
                <div className="title">{this.props.title}</div>
                    <a href="#" className="close" onClick={this.closeHandler}>
                </div>
            </div>
            <div className="content">
                {this.props.content}
            </div>
        </div>
    }
});

Anschließend öffnen Sie ein Dialogfeld durch aufrufen:

MyDialog.open({title: 'Dialog Title', content: 'My dialog content'});

Und schließen Sie es mit

MyDialog.close()

Den dialog immer legt, um einen neuen dom-Knoten direkt unter dem Körper mit der id 'dialog-Anker". Wenn Sie einen dialog öffnen, wenn man bereits geöffnet, wird Sie einfach aktualisieren Sie die dom-basierend auf neuen props (oder nicht, wenn Sie gleich sind).

Natürlich vorbei an den Inhalt der dialog als Requisiten argument ist nicht besonders hilfreich. Ich in der Regel verlängern unten, um entweder Parsen von markdown -> html ist für den Inhalt oder html Code über eine ajax-Anfrage innerhalb der Komponente bei Lieferung einer url, die als requisite statt.

Ich weiß, der obige code ist nicht genau das, was Sie suchen, aber ich glaube nicht, dass es ein guter Weg, um eine dom-ändern-plugin funktioniert mit reagieren. Man kann nie davon ausgehen, dass die dom-Darstellung der reagieren Komponente ist statisch und kann daher nicht manipuliert werden, um ein 3rd-party plugin erfolgreich. Ich denke ehrlich gesagt, dass wenn Sie verwenden möchten, reagieren auf diese Weise sollten Sie die neu zu bewerten, warum bist du mit dem Rahmen.

Sagte, ich denke, der code oben ist ein guter Ausgangspunkt für einen dialog, in dem alle manipulation tritt innerhalb der Komponente, die schließlich ist, was reactjs!

NB: code geschrieben wurde, sehr schnell aus dem Gedächtnis und nicht wirklich untersucht in seiner aktuellen form also sorry, wenn es ein paar kleine syntax-Fehler oder so etwas.

InformationsquelleAutor der Antwort Mike Driver