diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 0ff5820fd..1ea781bfe 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -79,7 +79,7 @@ title: Uncontrolled Components - id: web-components title: Web Components -- title: API Reference +- title: API di Riferimento items: - id: react-api title: React @@ -91,7 +91,7 @@ - id: react-dom-server title: ReactDOMServer - id: dom-elements - title: DOM Elements + title: Elementi DOM - id: events title: SyntheticEvent - id: test-utils diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 52e780b96..35f736567 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: Elementi DOM layout: docs category: Reference permalink: docs/dom-elements.html @@ -14,129 +14,129 @@ 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 implementa un sistema DOM indipendente dal browser per massimizzare le prestazioni e la compatibilità con i vari browsers. Abbiamo colto l'occasione per smussare gli angoli di alcune implementazioni nel DOM del browser. -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, tutte le proprietà DOM e gli attributi (inclusi i gestori degli eventi) dovrebbero essere [_camelCased_](https://it.wikipedia.org/wiki/Notazione_a_cammello). Ad esempio, l'attributo HTML `tabindex` corrisponde all'attributo `tabIndex` in React. Fanno eccezione gli attributi `aria-*` e `data-*`, i quali dovrebbero essere in minuscolo. Puoi mantenere `aria-label` come `aria-label` per esempio. -## Differences In Attributes {#differences-in-attributes} +## Differenze Negli Attributi {#differences-in-attributes} -There are a number of attributes that work differently between React and HTML: +Ci sono alcuni attributi che funzionano in modo diverso tra React ed 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. +L'attributo `checked` è supportato dai componenti `` di tipo `checkbox` o `radio`. Puoi usarlo per impostare il fatto che il componente sia appunto _checked_ ovvero selezionato/attivato. Ci torna utile nella costruzione di componenti controllati. `defaultChecked` è l'equivalente non controllato, il quale imposta l'attributo `checked` del componente la prima volta che esso viene montato. ### className {#classname} -To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `
`, ``, and others. +Per specificate una classe CSS, utilizza l'attributo `className`. Si applica a tutti i normali elementi DOM ed SVG come `
`, `` ed altri. -If you use React with Web Components (which is uncommon), use the `class` attribute instead. +Se stai utilizzando React con i [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) (fatto poco comune), usa invece l'attributo `class`. ### 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` è la controparte React all'uso di `innerHTML` nel browser DOM. In generale, impostare HTML dal codice è rischioso in quanto può esporre facilmente i tuoi utenti ad attacchi [cross-site scripting (XSS)](https://it.wikipedia.org/wiki/Cross-site_scripting). Puoi impostare HTML direttamente da React, ma devi farlo utilizzando `dangerouslySetInnerHTML` e passando un oggetto avente chiave `__html` per ricordarti del fatto che è pericoloso: Ad esempio: ```js -function createMarkup() { - return {__html: 'First · Second'}; +function creaCodiceHtml() { + return {__html: 'Primo · Secondo'}; } -function MyComponent() { - return
; +function MioComponente() { + return
; } ``` ### htmlFor {#htmlfor} -Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. +Dato che `for` è una parola riservata in JavaScript, gli elementi React utilizzano `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. +L'evento `onChange` si comporta così come di consueto: quando un campo in un form cambia, l'evento viene lanciato. Non utilizziamo intenzionalmente il comportamento esistente nel browser perché il nome `onChange` non descrive molto bene il suo comportamento e React si basa su questo evento per gestire gli input dell'utente in tempo reale. ### selected {#selected} -The `selected` attribute is supported by `