diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3318d8499..c2a283067 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -1,76 +1,75 @@ --- id: forwarding-refs -title: Forwarding Refs +title: Weiterleiten von Refs permalink: docs/forwarding-refs.html --- +Weiterleiten von Refs ist eine Technik für die automatische Übergabe einer [Ref](/docs/refs-and-the-dom.html) durch eine Komponente an eines seiner Kinder. Normalerweise besteht für die meisten Komponenten innerhalb einer Anwendung kein Bedarf dafür. Nichtsdestotrotz, kann es für gewisse Arten von Komponenten nützlich sein, vor allem wenn es sich dabei um wiederverwendbare Komponenten-Bibliotheken handelt. Die gängigsten Szenarien werden unterhalb beschrieben. -Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below. +## Weiterleiten von Refs zu DOM-Komponenten {#forwarding-refs-to-dom-components} -## Forwarding refs to DOM components {#forwarding-refs-to-dom-components} - -Consider a `FancyButton` component that renders the native `button` DOM element: +Stelle dir eine `FancyButton` Komponente vor, welche das native `button` DOM-Element rendert: `embed:forwarding-refs/fancy-button-simple.js` -React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much. +React Komponenten verbergen ihre Implementierungsdetails, einschließlich der gerenderten Ausgabe. Andere Komponenten die `FancyButton` benutzen, werden **in den meisten Fällen keine Notwendigkeit** für den [Abruf einer Ref](/docs/refs-and-the-dom.html) zum inneren `button` DOM-Element haben. Das ist gut so, da dies eine zu starke Abhängigkeit unter den Komponenten auf die gegenseitige DOM-Struktur verhindert. -Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations. +Trotz der Tatsache, dass solch eine Kapselung für Komponenten in der Anwendungsebene wie `FeedStory` oder `Comment` erwünscht ist, kann dies für "Blatt-Komponenten" mit einem hohen Wiederverwendbarkeitsgrad, wie `FancyButton` oder `MyTextInput` unpraktisch sein. Diese Komponenten werden oft in der ganzen Anwendung als reguläre DOM `button` und `input` auf ähnliche Weise eingesetzt und der Zugriff auf dessen DOM-Knoten könnte für die Regelung von Fokus, Auswahl oder Animationen unvermeidlich sein. -**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.** +**Die Weiterleitung von Refs ist ein Opt-In Feature, welches manchen Komponenten die Möglichkeit bereitstellt, eine erhaltene `ref`, weiter nach unten zu einem Kind durchzulassen (in anderen Worten, "weiterzuleiten").** -In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders: +Im unteren Beispiel benutzt `FancyButton` `React.forwardRef`, um die übermittelte `ref` abzurufen und diese anschließend an den gerenderten DOM `button` weiterzuleiten. `embed:forwarding-refs/fancy-button-simple-ref.js` -This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly. +In diesem Fall, können die Komponenten die `FancyButton` nutzen, das Ref zum unterliegenden `button` DOM-Knoten abrufen und dies bei bedarf nutzen—so als ob sie direkt auf den DOM `button` zugreifen würden. -Here is a step-by-step explanation of what happens in the above example: +Hier ist eine Schritt für Schritt Erklärung was im oberen Beispiel passiert: -1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable. -1. We pass our `ref` down to `` by specifying it as a JSX attribute. -1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument. -1. We forward this `ref` argument down to ` )); -// You can now get a ref directly to the DOM button: +// Du kannst jetzt ein Ref direkt zum DOM button bekommen: const ref = React.createRef(); Click me!; diff --git a/examples/forwarding-refs/fancy-button.js b/examples/forwarding-refs/fancy-button.js index 9dcd13e16..df9b0dbbf 100644 --- a/examples/forwarding-refs/fancy-button.js +++ b/examples/forwarding-refs/fancy-button.js @@ -6,7 +6,7 @@ class FancyButton extends React.Component { // ... } -// Rather than exporting FancyButton, we export LogProps. -// It will render a FancyButton though. +// Anstatt die FancyButton Komponente zu exportieren, exportieren wir LogProps. +// Es wird trotzdem der FancyButton gerendert. // highlight-next-line export default logProps(FancyButton); diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js index a603bd697..d9cfa5b7b 100644 --- a/examples/forwarding-refs/log-props-after.js +++ b/examples/forwarding-refs/log-props-after.js @@ -9,15 +9,15 @@ function logProps(Component) { // highlight-next-line const {forwardedRef, ...rest} = this.props; - // Assign the custom prop "forwardedRef" as a ref + // Weise die benutzerdefinierte Eigenschaft "forwardRef" als Ref zu // highlight-next-line return ; } } - // Note the second param "ref" provided by React.forwardRef. - // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef" - // And it can then be attached to the Component. + // Beachte das zweite Attribut "ref", welches von React.forwardRef bereitgestellt wird. + // Wir können es an LogProps wie eine reguläre Eigenschaft weiterleiten, z.B. "forwardRef" + // Und es kann einer Komponente zugewiesen werden. // highlight-range{1-3} return React.forwardRef((props, ref) => { return ; diff --git a/examples/forwarding-refs/log-props-before.js b/examples/forwarding-refs/log-props-before.js index a507e818b..91a6eb78d 100644 --- a/examples/forwarding-refs/log-props-before.js +++ b/examples/forwarding-refs/log-props-before.js @@ -2,8 +2,8 @@ function logProps(WrappedComponent) { class LogProps extends React.Component { componentDidUpdate(prevProps) { - console.log('old props:', prevProps); - console.log('new props:', this.props); + console.log('Alte Eigenschaften:', prevProps); + console.log('Neue Eigenschaften:', this.props); } render() {