diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 5bc8b2570..dd273c03e 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -1,26 +1,26 @@ --- id: integrating-with-other-libraries -title: Integrating with Other Libraries +title: Integration mit anderen Bibliotheken permalink: docs/integrating-with-other-libraries.html --- -React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](https://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code. +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](https://jquery.com/) und [Backbone](https://backbonejs.org/) liegt der gleiche Ansatz kann jedoch angewandt werden, um Komponenten in bereits vorhandenen Code zu integrieren. -## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins} +## Integration mit DOM-Manipulations-Plugins {#integrating-with-dom-manipulation-plugins} -React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover. +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. -This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing. +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. -The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `
`. +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 `
`. -### How to Approach the Problem {#how-to-approach-the-problem} +### Wie nähere du dich dem Problem {#how-to-approach-the-problem} -To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin. +Um dies zu demonstrieren, skizzieren wir einen Wrapper für ein generisches jQuery-Plugin. -We will attach a [ref](/docs/refs-and-the-dom.html) to the root DOM element. Inside `componentDidMount`, we will get a reference to it so we can pass it to the jQuery plugin. +Wir werden eine [ref](/ docs / refs-and-the-dom.html) an das Root-DOM-Element anhängen. In `componentDidMount` erhalten wir einen Verweis darauf, damit wir ihn an das jQuery-Plugin übergeben können. -To prevent React from touching the DOM after mounting, we will return an empty `
` from the `render()` method. The `
` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM: +Um zu verhindern, dass React das DOM nach dem Mounten berücksichtigt, geben wir ein leeres `
` von der `render()`-Methode zurück. Das `
`-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: ```js{3,4,8,12} class SomePlugin extends React.Component { @@ -39,37 +39,37 @@ class SomePlugin extends React.Component { } ``` -Note that we defined both `componentDidMount` and `componentWillUnmount` [lifecycle methods](/docs/react-component.html#the-component-lifecycle). Many jQuery plugins attach event listeners to the DOM so it's important to detach them in `componentWillUnmount`. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks. +Beachte, dass wir sowohl `componentDidMount` als auch `componentWillUnmount` [Lebenszyklusmethoden](/docs/react-component.html#the-component-lifecycle) 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. -### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin} +### Integration mit dem jQuery Chosen-Plugin {#integrating-with-jquery-chosen-plugin} -For a more concrete example of these concepts, let's write a minimal wrapper for the plugin [Chosen](https://harvesthq.github.io/chosen/), which augments `` erweitert. ->**Note:** +>**Hinweis:** > ->Just because it's possible, doesn't mean that it's the best approach for React apps. We encourage you to use React components when you can. React components are easier to reuse in React applications, and often provide more control over their behavior and appearance. +>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. -First, let's look at what Chosen does to the DOM. +Schauen wir uns zunächst an, was Chosen mit dem DOM macht. -If you call it on a ``. Then it fires jQuery events to notify us about the changes. +Wenn du es auf einem ` einen separaten DOM-Knoten mit eigener visueller Darstellung hinzu. Anschließend werden jQuery-Events ausgelöst, um uns über die Änderungen zu informieren. -Let's say that this is the API we're striving for with our `` wrapper React component: +Angenommen, dies ist die API, die wir mit unserer ``-Wrapper-React-Komponente anstreben: ```js function Example() { return ( console.log(value)}> - - - + + + ); } ``` -We will implement it as an [uncontrolled component](/docs/uncontrolled-components.html) for simplicity. +Der Einfachheit halber werden wir es als [unkontrollierte Komponente] (/docs/uncontrolled-components.html) implementieren. -First, we will create an empty component with a `render()` method where we return `` in ein `
` eingeschlossen zurückgeben: ```js{4,5} class Chosen extends React.Component { @@ -85,9 +85,9 @@ class Chosen extends React.Component { } ``` -Notice how we wrapped `` node we passed to it. However, as far as React is concerned, `
` always only has a single child. This is how we ensure that React updates won't conflict with the extra DOM node appended by Chosen. It is important that if you modify the DOM outside of React flow, you must ensure React doesn't have a reason to touch those DOM nodes. +Beachte, wie wir `` anfügt, den wir an ihn übergeben haben. In Bezug auf React hat `
` jedoch immer nur ein einziges untergeordnetes Element. Auf diese Weise stellen wir sicher, dass React-Updates nicht mit dem von Chosen angehängten zusätzlichen DOM-Knoten in Konflikt stehen. Wenn du das DOM außerhalb von React Flow änderst, musst du sicherstellen, dass React keinen Grund hat, diese DOM-Knoten zu berücksichtigen. -Next, we will implement the lifecycle methods. We need to initialize Chosen with the ref to the ``-Knoten in `componentDidMount` initialisieren und ihn in `componentWillUnmount` zerstören: ```js{2,3,7} componentDidMount() { @@ -100,17 +100,17 @@ componentWillUnmount() { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010) +[**Probiere es mit CodePen aus**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010) -Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method: +Beachte, dass React dem Feld `this.el` keine besondere Bedeutung zuweist. Es funktioniert nur, weil wir dieses Feld zuvor von einem `ref` in der `render()`-Methode zugewiesen haben: ```js ` managed by Chosen. +Dies reicht aus, um unsere Komponente rendern zu lassen, wir möchten jedoch auch über die Wertänderungen informiert werden. Dazu abonnieren wir das `change` jQuery-Event für das von Chosen verwaltete ``, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list: +Aus der Dokumentation von Chosen geht hervor, dass wir die jQuery `trigger()`-API verwenden können, um Änderungen am ursprünglichen DOM-Element zu melden. Wir überlassen es React, `this.props.children` in `` children managed by React change. +Auf diese Weise kann Chosen das DOM-Element aktualisieren, wenn sich die von React verwalteten, dem `
- My name is {props.firstName}. + Ich heiße {props.firstName}.

); } @@ -434,6 +434,6 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/PmWwwa?editors=0010) +[**Probiere es mit CodePen aus**](https://codepen.io/gaearon/pen/PmWwwa?editors=0010) -This technique is not limited to Backbone. You can use React with any model library by subscribing to its changes in the lifecycle methods and, optionally, copying the data into the local React state. +Diese Technik ist nicht auf Backbone beschränkt. Du kannst React mit jeder Modellbibliothek verwenden, indem du die Änderungen in den Lebenszyklusmethoden abonnierst und die Daten optional in den lokalen React-State kopierst.