Integration mit anderen Bibliotheken

React kann in jeder Webanwendung verwendet werden. Es kann in andere Anwendungen eingebettet werden, und mit ein wenig Sorgfalt können andere Anwendungen in React eingebettet werden. In diesem Handbuch werden einige der gebräuchlichsten Anwendungsfälle untersucht, wobei der Schwerpunkt auf der Integration mit jQuery und Backbone liegt der gleiche Ansatz kann jedoch angewandt werden, um Komponenten in bereits vorhandenen Code zu integrieren.

Integration mit DOM-Manipulations-Plugins

React kennt keine Änderungen am DOM außerhalb von React. Es ermittelt Aktualisierungen auf der Grundlage seiner eigenen internen Darstellung. Wenn dieselben DOM-Knoten von einer anderen Bibliothek bearbeitet werden, ist React verwirrt und kann nicht wiederhergestellt werden.

Dies bedeutet nicht, dass es unmöglich oder sogar zwangsläufig schwer ist, React mit anderen Möglichkeiten zur Beeinflussung des DOM zu kombinieren. Du musst lediglich bedenken, welche Folgen einzelne Möglichkeiten mit sich bringen.

Der einfachste Weg Konflikte zu vermeiden, besteht darin, zu verhindern, dass die React-Komponente aktualisiert wird. Du kannst dies tun, indem du Elemente renderst, für die React keinen Grund zum Aktualisieren hat, z. B. ein leeres <div />.

Wie nähere du dich dem Problem

Um dies zu demonstrieren, skizzieren wir einen Wrapper für ein generisches jQuery-Plugin.

Wir werden eine ref an das Root-DOM-Element anhängen. In componentDidMount erhalten wir einen Verweis darauf, damit wir ihn an das jQuery-Plugin übergeben können.

Um zu verhindern, dass React das DOM nach dem Mounten berücksichtigt, geben wir ein leeres <div /> von der render()-Methode zurück. Das <div />-Element hat keine Eigenschaften oder untergeordneten Elemente, daher hat React keinen Grund, es zu aktualisieren, sodass das jQuery-Plugin diesen Teil des DOM verwalten kann:

class SomePlugin extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);    this.$el.somePlugin();  }

  componentWillUnmount() {
    this.$el.somePlugin('destroy');  }

  render() {
    return <div ref={el => this.el = el} />;  }
}

Beachte, dass wir sowohl componentDidMount als auch componentWillUnmount Lebenszyklusmethoden definiert haben. Viele jQuery-Plugins hängen Event-Listener an das DOM an, daher ist es wichtig, sie in componentWillUnmount zu entfernen. Wenn das Plugin keine Bereinigungsmethode bereitstellt, musst du wahrscheinlich eine eigene Methode bereitstellen. Denke daran, alle vom Plugin registrierten Event-Listener zu entfernen, um Speicherlecks zu vermeiden.

Integration mit dem jQuery Chosen-Plugin

Um ein konkreteres Beispiel für diese Konzepte zu finden, schreiben wir einen minimalen Wrapper für das Plugin Chosen, der die Eingaben von <select> erweitert.

Hinweis:

Nur weil es möglich ist, heißt das nicht, dass es der beste Ansatz für React-Apps ist. Wir empfehlen dir die Verwendung von React-Komponenten, wenn du die freie Wahl hast. React-Komponenten lassen sich in React-Anwendungen leichter wiederverwenden und bieten häufig eine bessere Kontrolle über ihr Verhalten und Erscheinungsbild.

Schauen wir uns zunächst an, was Chosen mit dem DOM macht.

Wenn du es auf einem