From d46170144d7248e01ae4b552f69e14bf5169e434 Mon Sep 17 00:00:00 2001 From: Noah Fleischmann Date: Sat, 2 Mar 2019 15:42:59 +0100 Subject: [PATCH 1/6] Translate DOM Elements --- content/docs/reference-dom-elements.md | 84 +++++++++++++------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 52e780b96..93d97f50b 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -1,6 +1,6 @@ --- id: dom-elements -title: DOM Elements +title: DOM Elemente layout: docs category: Reference permalink: docs/dom-elements.html @@ -14,31 +14,31 @@ redirect_from: - "tips/dangerously-set-inner-html.html" --- -React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations. +React implementiert eine browserunabhängiges DOM-System für Performacne und browser-übergreifende Kompatibilität. Wir haben die Gelegenheit genutzt, um ein paar Ecken und Kanten in den DOM-Implementationen der Browser zu bereinigen. -In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute `tabindex` corresponds to the attribute `tabIndex` in React. The exception is `aria-*` and `data-*` attributes, which should be lowercased. For example, you can keep `aria-label` as `aria-label`. +In React sollen alle DOM Eigenschaften und Attribute (einschließlich Event-Handler) camelCased sein. Zum Beispiel, das HTML-Attribut `tabindex` entspricht dem Attribut `tabIndex` in React. Ausnahmen sind die `aria-*` und `data-*` Attribute, welche kleingeschrieben werden sollen. Zum Beispiel kannst du weiterhin `aria-label` für `aria-label` verwenden. -## Differences In Attributes {#differences-in-attributes} +## Unterschiede bei Attributen {#differences-in-attributes} -There are a number of attributes that work differently between React and HTML: +Es gibt etliche Attribute, die in React unterschiedlich funktionieren als in HTML: ### checked {#checked} -The `checked` attribute is supported by `` components of type `checkbox` or `radio`. You can use it to set whether the component is checked. This is useful for building controlled components. `defaultChecked` is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted. +Das `checked` Attribute wird von `` Komponenten des Typs `checkbox` oder `radio` unterstützt. Du kannst es benutzten um festzulegen, ob die Komponente angekreuzt ist oder nicht. Das ist nützlich, um kontrollierte Komponenten zu erstellen. `defaultChecked` ist das unkontrollierte Äquivalent, welches festlegt, ob die Komponente angekreuzt ist, wenn sie erstmals gemounted wird. ### className {#classname} -To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `
`, ``, and others. +Benutze das `className` Attribut, um eine CSS-Klasse zu definieren. Dies trifft auf alle regulären DOM- und SVG-Elemente wie zum Beispiel `
` oder `` zu. -If you use React with Web Components (which is uncommon), use the `class` attribute instead. +Benutze stattdessen das `class` Attribut, wenn du React mit Web-Komponenten benutzt (was ungewöhnlich ist). ### dangerouslySetInnerHTML {#dangerouslysetinnerhtml} -`dangerouslySetInnerHTML` is React's replacement for using `innerHTML` in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out `dangerouslySetInnerHTML` and pass an object with a `__html` key, to remind yourself that it's dangerous. For example: +`dangerouslySetInnerHTML` ist der Ersatz von React für die Benutzung von `innerHTML` in dem Browser-DOM. Im Allgemeinen ist es riskant HTML aus dem Programmcode heraus zu manipulieren, da es einfach ist, unbeabsichtigt Benutzer eines [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) Angriffs auszusetzen. Deshalb ist es zwar möglich, HTML direkt aus React heraus zu Manipulieren, man muss dafür aber `dangerouslySetInnerHTML` schreiben und ein Objekt mit einem `__html` Schlüssel mitgeben, um sich daran zu erinnern, dass es gefährlich ist. Zum Beispiel: ```js function createMarkup() { - return {__html: 'First · Second'}; + return {__html: 'Erstens · Zweitens'}; } function MyComponent() { @@ -48,23 +48,23 @@ function MyComponent() { ### htmlFor {#htmlfor} -Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. +Da `for` ein für JavaScript reserviert es Wort ist, verwenden React-Elemente stattdessen `htmlFor`. ### onChange {#onchange} -The `onChange` event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to handle user input in real time. +Der `onChange` Event verhält sich, wie es zu erwarten ist: wann immer sich das Feld eines Formulars ändert, wird dieser Event ausgelöst. Wir verwenden absichtlich nicht das bereits existierende Verhalten des Browsers, da `onChange` eine Fehlbezeichnung für dessen verhalten ist. React verlässt sich auf diesen Event, um Eingaben des Users in Echtzeit zu bearbeiten. ### selected {#selected} -The `selected` attribute is supported by `