From c107aa8d04e5ac88bced0f67bf55804c985340b7 Mon Sep 17 00:00:00 2001 From: Ramiz Wachtler Date: Sat, 19 Oct 2019 21:37:48 +0200 Subject: [PATCH 1/5] Started translation --- content/docs/forwarding-refs.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3318d8499..b49ba36d4 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -1,29 +1,29 @@ --- id: forwarding-refs -title: Forwarding Refs +title: Weiterleiten von Refs permalink: docs/forwarding-refs.html --- -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 ist eine Technik für das automatische Weiterleiten einer [ref](/docs/refs-and-the-dom.html) durch eine Komponente zum einem der Kinder dieser Komponente. Dies ist des Öfteren nicht notwendig für die meisten Komponenten in der Applikation. Nichtsdestotrotz, kann es für gewisse Art von Komponenten nützlich sein, vor allem wenn es sich dabei um wiederverwendbare Komponenten-Bibliotheken handelt. Die gängisten Szenarien werden unterhalb beschrieben. -## Forwarding refs to DOM components {#forwarding-refs-to-dom-components} +## Weiterleiten von Refs zu DOM-Komponenten {#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 Implemenentierungsdetails, 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 hoher Wiederverwendbarkeit 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.** +**Ref Weiterleitung 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, "weiterleiten").** -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 dann an den gerenderten DOM `button` zu weiterleiten. `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. From b0859b9cad8f4814507b32715f9407a98e1bb40f Mon Sep 17 00:00:00 2001 From: Ramiz Wachtler Date: Mon, 21 Oct 2019 22:30:31 +0200 Subject: [PATCH 2/5] Translated the comments within examples --- examples/forwarding-refs/customized-display-name.js | 4 ++-- examples/forwarding-refs/fancy-button-ref.js | 8 ++++---- examples/forwarding-refs/fancy-button-simple-ref.js | 2 +- examples/forwarding-refs/fancy-button.js | 4 ++-- examples/forwarding-refs/log-props-after.js | 8 ++++---- examples/forwarding-refs/log-props-before.js | 4 ++-- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/examples/forwarding-refs/customized-display-name.js b/examples/forwarding-refs/customized-display-name.js index 28bbd9203..75a8e07dd 100644 --- a/examples/forwarding-refs/customized-display-name.js +++ b/examples/forwarding-refs/customized-display-name.js @@ -7,8 +7,8 @@ function logProps(Component) { return ; } - // Give this component a more helpful display name in DevTools. - // e.g. "ForwardRef(logProps(MyComponent))" + // Weise dieser Komponente einen aussagekräftigen Namen in DevTools zu. + // z.B. "ForwardRef(logProps(MyComponent))" // highlight-range{1-2} const name = Component.displayName || Component.name; forwardRef.displayName = `logProps(${name})`; diff --git a/examples/forwarding-refs/fancy-button-ref.js b/examples/forwarding-refs/fancy-button-ref.js index 36e15dd2d..b82979f80 100644 --- a/examples/forwarding-refs/fancy-button-ref.js +++ b/examples/forwarding-refs/fancy-button-ref.js @@ -3,10 +3,10 @@ import FancyButton from './FancyButton'; // highlight-next-line const ref = React.createRef(); -// The FancyButton component we imported is the LogProps HOC. -// Even though the rendered output will be the same, -// Our ref will point to LogProps instead of the inner FancyButton component! -// This means we can't call e.g. ref.current.focus() +// Die FancyButton Komponente die wir importieren ist die LogProps HOK. +// Auch wenn die gerenderte Ausgabe gleich bleibt, +// wird unsere Ref auf `LogProps` statt auf die innere FancyButton Komponente verweisen! +// Dies bedeutet, dass wir z.B. kein ref.current.focus() aufrufen können. // highlight-range{4} ( )); -// 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() { From ca3737cb3197ac63a883713a2fe56354ba15da8b Mon Sep 17 00:00:00 2001 From: Ramiz Wachtler Date: Mon, 21 Oct 2019 22:30:38 +0200 Subject: [PATCH 3/5] Finished translation --- content/docs/forwarding-refs.md | 56 ++++++++++++++++----------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index b49ba36d4..e15365905 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -4,73 +4,73 @@ title: Weiterleiten von Refs permalink: docs/forwarding-refs.html --- -Weiterleiten von Refs ist eine Technik für das automatische Weiterleiten einer [ref](/docs/refs-and-the-dom.html) durch eine Komponente zum einem der Kinder dieser Komponente. Dies ist des Öfteren nicht notwendig für die meisten Komponenten in der Applikation. Nichtsdestotrotz, kann es für gewisse Art von Komponenten nützlich sein, vor allem wenn es sich dabei um wiederverwendbare Komponenten-Bibliotheken handelt. Die gängisten Szenarien werden unterhalb beschrieben. +Weiterleiten von Refs ist eine Technik für das automatische Weiterleiten einer [Ref](/docs/refs-and-the-dom.html) durch eine Komponente zu einem der Kinder dieser Komponente. Normalerweise besteht für die meisten Komponenten innerhalb einer Anwendung kein Bedarf dafür. Nichtsdestotrotz, kann es für gewisse Art von Komponenten nützlich sein, vor allem wenn es sich dabei um wiederverwendbare Komponenten-Bibliotheken handelt. Die gängigsten Szenarien werden unterhalb beschrieben. ## Weiterleiten von Refs zu DOM-Komponenten {#forwarding-refs-to-dom-components} Stelle dir eine `FancyButton` Komponente vor, welche das native `button` DOM-Element rendert: `embed:forwarding-refs/fancy-button-simple.js` -React Komponenten verbergen ihre Implemenentierungsdetails, 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. +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. -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 hoher Wiederverwendbarkeit 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. +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 Weiterleitung 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, "weiterleiten").** +**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").** -Im unteren Beispiel benutzt `FancyButton` `React.forwardRef`, um die übermittelte `ref` abzurufen und diese dann an den gerenderten DOM `button` zu weiterleiten. +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` 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. -Hier ist eine Schritt für Schritt erklärung was im oberen Beispiel passiert: +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 `