You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/createPortal.md
+55-48Lines changed: 55 additions & 48 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,17 @@
1
1
---
2
2
title: createPortal
3
+
translationStatus: ai-draft
3
4
---
4
5
6
+
<Note>
7
+
8
+
Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react-dom/createPortal.md).
9
+
10
+
</Note>
11
+
5
12
<Intro>
6
13
7
-
`createPortal`lets you render some children into a different part of the DOM.
14
+
`createPortal`ti permette di renderizzare alcuni figli in una parte diversa del DOM.
To create a portal, call`createPortal`, passing some JSX, and the DOM node where it should be rendered:
34
+
Per creare un portal, chiama`createPortal` passando del JSX e il nodo DOM in cui deve essere renderizzato:
28
35
29
36
```js
30
37
import { createPortal } from'react-dom';
31
38
32
39
// ...
33
40
34
41
<div>
35
-
<p>This child is placed in the parent div.</p>
42
+
<p>Questo figlio è posizionato nel div genitore.</p>
36
43
{createPortal(
37
-
<p>This child is placed in the document body.</p>,
44
+
<p>Questo figlio è posizionato nel body del documento.</p>,
38
45
document.body
39
46
)}
40
47
</div>
41
48
```
42
49
43
-
[See more examples below.](#usage)
50
+
[Vedi altri esempi sotto.](#usage)
44
51
45
-
A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events bubble up from children to parents according to the React tree.
52
+
Un portal modifica solo il posizionamento fisico del nodo DOM. Per il resto, il JSX che renderizzi in un portal si comporta come un nodo figlio del componente React che lo renderizza. Ad esempio, il figlio può accedere al context fornito dall'albero genitore e gli eventi risalgono dai figli ai genitori secondo l'albero React.
46
53
47
54
#### Parameters {/*parameters*/}
48
55
49
-
* `children`: Anything that can be rendered with React, such as a piece of JSX (e.g.`<div />`or`<SomeComponent />`), a [Fragment](/reference/react/Fragment) (`<>...</>`), a string or a number, or an array of these.
56
+
* `children`: Qualsiasi cosa che possa essere renderizzata con React, come un pezzo di JSX (ad es.`<div />`o`<SomeComponent />`), un [Fragment](/reference/react/Fragment) (`<>...</>`), una stringa o un numero, oppure un array di questi.
50
57
51
-
* `domNode`: Some DOM node, such as those returned by `document.getElementById()`. The node must already exist. Passing a different DOM node during an update will cause the portal content to be recreated.
58
+
* `domNode`: Un nodo DOM, come quelli restituiti da `document.getElementById()`. Il nodo deve già esistere. Passare un nodo DOM diverso durante un aggiornamento farà ricreare il contenuto del portal.
52
59
53
-
* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
60
+
* **optional** `key`: Una stringa o un numero univoco da usare come [key](/learn/rendering-lists#keeping-list-items-in-order-with-key) del portal.
54
61
55
62
#### Returns {/*returns*/}
56
63
57
-
`createPortal`returns a React node that can be included into JSX or returned from a React component. If React encounters it in the render output, it will place the provided `children`inside the provided`domNode`.
64
+
`createPortal`restituisce un nodo React che può essere incluso nel JSX o restituito da un componente React. Se React lo incontra nell'output di renderizzazione, posizionerà i `children`forniti all'interno del`domNode` fornito.
58
65
59
66
#### Caveats {/*caveats*/}
60
67
61
-
* Events from portals propagate according to the React tree rather than the DOM tree. For example, if you click inside a portal, and the portal is wrapped in `<div onClick>`, that `onClick` handler will fire. If this causes issues, either stop the event propagation from inside the portal, or move the portal itself up in the React tree.
68
+
* Gli eventi dai portal si propagano secondo l'albero React anziché l'albero DOM. Ad esempio, se fai clic all'interno di un portal e il portal è avvolto in `<div onClick>`, verrà eseguito quel gestore di eventi `onClick`. Se questo causa problemi, interrompi la propagazione dell'evento dall'interno del portal oppure sposta il portal stesso più in alto nell'albero React.
62
69
63
70
---
64
71
65
72
## Usage {/*usage*/}
66
73
67
-
### Rendering to a different part of the DOM {/*rendering-to-a-different-part-of-the-dom*/}
74
+
### Renderizzare in una parte diversa del DOM {/*rendering-to-a-different-part-of-the-dom*/}
68
75
69
-
*Portals* let your components render some of their children into a different place in the DOM. This lets a part of your component "escape" from whatever containers it may be in. For example, a component can display a modal dialog or a tooltip that appears above and outside of the rest of the page.
76
+
I *portal* permettono ai tuoi componenti di renderizzare alcuni dei loro figli in un punto diverso del DOM. Così una parte del componente può "uscire" da qualunque contenitore in cui si trovi. Ad esempio, un componente può mostrare una finestra modale o un tooltip che appare sopra e fuori dal resto della pagina.
70
77
71
-
To create a portal, render the result of`createPortal`with <CodeStep step={1}>some JSX</CodeStep> and the <CodeStep step={2}>DOM node where it should go</CodeStep>:
78
+
Per creare un portal, renderizza il risultato di`createPortal`con <CodeStep step={1}>del JSX</CodeStep> e il <CodeStep step={2}>nodo DOM in cui deve andare</CodeStep>:
72
79
73
-
```js [[1, 8, "<p>This child is placed in the document body.</p>"], [2, 9, "document.body"]]
80
+
```js [[1, 8, "<p>Questo figlio è posizionato nel body del documento.</p>"], [2, 9, "document.body"]]
74
81
import { createPortal } from'react-dom';
75
82
76
83
functionMyComponent() {
77
84
return (
78
85
<div style={{ border:'2px solid black' }}>
79
-
<p>This child is placed in the parent div.</p>
86
+
<p>Questo figlio è posizionato nel div genitore.</p>
80
87
{createPortal(
81
-
<p>This child is placed in the document body.</p>,
88
+
<p>Questo figlio è posizionato nel body del documento.</p>,
82
89
document.body
83
90
)}
84
91
</div>
85
92
);
86
93
}
87
94
```
88
95
89
-
React will put the DOM nodes for <CodeStep step={1}>the JSX you passed</CodeStep> inside of the <CodeStep step={2}>DOM node you provided</CodeStep>.
96
+
React inserirà i nodi DOM del <CodeStep step={1}>JSX che hai passato</CodeStep> all'interno del <CodeStep step={2}>nodo DOM che hai fornito</CodeStep>.
90
97
91
-
Without a portal, the second`<p>`would be placed inside the parent `<div>`, but the portal "teleported" it into the [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)
98
+
Senza un portal, il secondo`<p>`sarebbe posizionato all'interno del `<div>` genitore, ma il portal lo ha "teletrasportato" nel [`document.body`:](https://developer.mozilla.org/it/docs/Web/API/Document/body)
92
99
93
100
<Sandpack>
94
101
@@ -98,9 +105,9 @@ import { createPortal } from 'react-dom';
98
105
exportdefaultfunctionMyComponent() {
99
106
return (
100
107
<div style={{ border:'2px solid black' }}>
101
-
<p>This child is placed in the parent div.</p>
108
+
<p>Questo figlio è posizionato nel div genitore.</p>
102
109
{createPortal(
103
-
<p>This child is placed in the document body.</p>,
110
+
<p>Questo figlio è posizionato nel body del documento.</p>,
104
111
document.body
105
112
)}
106
113
</div>
@@ -110,30 +117,30 @@ export default function MyComponent() {
110
117
111
118
</Sandpack>
112
119
113
-
Notice how the second paragraph visually appears outside the parent `<div>`with the border. If you inspect the DOM structure with developer tools, you'll see that the second `<p>`got placed directly into the`<body>`:
120
+
Nota come il secondo paragrafo appare visivamente fuori dal `<div>`genitore con il bordo. Se ispezioni la struttura DOM con gli strumenti per sviluppatori, vedrai che il secondo `<p>`è stato posizionato direttamente nel`<body>`:
114
121
115
122
```html {4-6,9}
116
123
<body>
117
124
<div id="root">
118
125
...
119
126
<div style="border: 2px solid black">
120
-
<p>This child is placed inside the parent div.</p>
127
+
<p>Questo figlio è posizionato nel div genitore.</p>
121
128
</div>
122
129
...
123
130
</div>
124
-
<p>This child is placed in the document body.</p>
131
+
<p>Questo figlio è posizionato nel body del documento.</p>
125
132
</body>
126
133
```
127
134
128
-
A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events still bubble up from children to parents according to the React tree.
135
+
Un portal modifica solo il posizionamento fisico del nodo DOM. Per il resto, il JSX che renderizzi in un portal si comporta come un nodo figlio del componente React che lo renderizza. Ad esempio, il figlio può accedere al context fornito dall'albero genitore e gli eventi risalgono comunque dai figli ai genitori secondo l'albero React.
129
136
130
137
---
131
138
132
-
### Rendering a modal dialog with a portal {/*rendering-a-modal-dialog-with-a-portal*/}
139
+
### Renderizzare una finestra modale con un portal {/*rendering-a-modal-dialog-with-a-portal*/}
133
140
134
-
You can use a portal to create a modal dialog that floats above the rest of the page, even if the component that summons the dialog is inside a container with`overflow: hidden`or other styles that interfere with the dialog.
141
+
Puoi usare un portal per creare una finestra modale che fluttua sopra il resto della pagina, anche se il componente che la invoca si trova dentro un contenitore con`overflow: hidden`o altri stili che interferiscono con la finestra.
135
142
136
-
In this example, the two containers have styles that disrupt the modal dialog, but the one rendered into a portal is unaffected because, in the DOM, the modal is not contained within the parent JSX elements.
143
+
In questo esempio, i due contenitori hanno stili che disturbano la finestra modale, ma quella renderizzata in un portal non ne è influenzata perché, nel DOM, la modale non è contenuta negli elementi JSX genitori.
137
144
138
145
<Sandpack>
139
146
@@ -164,7 +171,7 @@ export default function NoPortalExample() {
It's important to make sure that your app is accessible when using portals. For instance, you may need to manage keyboard focus so that the user can move the focus in and out of the portal ina natural way.
248
+
È importante assicurarsi che l'app sia accessibile quando usi i portal. Ad esempio, potresti dover gestire il focus da tastiera in modo che l'utente possa spostarlo dentro e fuori dal portal in modo naturale.
242
249
243
-
Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines.
250
+
Segui le [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal) quando crei modali. Se usi un pacchetto della community, assicurati che sia accessibile e segua queste linee guida.
244
251
245
252
</Pitfall>
246
253
247
254
---
248
255
249
-
### Rendering React components into non-React server markup {/*rendering-react-components-into-non-react-server-markup*/}
256
+
### Renderizzare componenti React in markup server non React {/*rendering-react-components-into-non-react-server-markup*/}
250
257
251
-
Portals can be useful if your React root is only part of a static or server-rendered page that isn't built with React. For example, if your page is built with a server framework like Rails, you can create areas of interactivity within static areas such as sidebars. Compared with having [multiple separate React roots,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) portals let you treat the app as a single React tree with shared state even though its parts render to different parts of the DOM.
258
+
I portal possono essere utili se la root React è solo una parte di una pagina statica o renderizzata lato server che non è costruita con React. Ad esempio, se la pagina è costruita con un framework server come Rails, puoi creare aree di interattività all'interno di aree statiche come le sidebar. Rispetto ad avere [più root React separate,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) i portal ti permettono di trattare l'app come un unico albero React con state condiviso anche se le sue parti renderizzano in punti diversi del DOM.
252
259
253
260
<Sandpack>
254
261
255
262
```html public/index.html
256
263
<!DOCTYPE html>
257
264
<html>
258
-
<head><title>My app</title></head>
265
+
<head><title>La mia app</title></head>
259
266
<body>
260
-
<h1>Welcome to my hybrid app</h1>
267
+
<h1>Benvenuto nella mia app ibrida</h1>
261
268
<div class="parent">
262
269
<div class="sidebar">
263
-
This is server non-React markup
270
+
Questo è markup server non React
264
271
<div id="sidebar-content"></div>
265
272
</div>
266
273
<div id="root"></div>
@@ -301,11 +308,11 @@ export default function App() {
301
308
}
302
309
303
310
functionMainContent() {
304
-
return <p>This part is rendered by React</p>;
311
+
return<p>Questa parte è renderizzata da React</p>;
305
312
}
306
313
307
314
functionSidebarContent() {
308
-
return <p>This part is also rendered by React!</p>;
315
+
return<p>Anche questa parte è renderizzata da React!</p>;
309
316
}
310
317
```
311
318
@@ -342,15 +349,15 @@ p {
342
349
343
350
---
344
351
345
-
### Rendering React components into non-React DOM nodes {/*rendering-react-components-into-non-react-dom-nodes*/}
352
+
### Renderizzare componenti React in nodi DOM non React {/*rendering-react-components-into-non-react-dom-nodes*/}
346
353
347
-
You can also use a portal to manage the content of a DOM node that's managed outside ofReact. For example, suppose you're integrating with a non-React map widget and you want to render React content inside a popup. To do this, declare a `popupContainer` state variable to store the DOM node you're going to render into:
354
+
Puoi anche usare un portal per gestire il contenuto di un nodo DOM gestito al di fuori di React. Ad esempio, supponiamo che tu stia integrando un widget mappa non React e voglia renderizzare contenuto React all'interno di un popup. Per farlo, dichiara una variabile di state `popupContainer`per memorizzare il nodo DOM in cui renderizzerai:
0 commit comments