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
Để tạo một portal, hãy gọi `createPortal`, truyền một số JSX và DOM node nơi nó sẽ được hiển thị:
26
+
Để tạo một portal, hãy gọi `createPortal`, truyền một số JSX và nút DOM nơi nó sẽ được kết xuất:
27
27
28
28
```js
29
29
import { createPortal } from'react-dom';
30
30
31
31
// ...
32
32
33
33
<div>
34
-
<p>Phần tử con này được đặt trong div cha.</p>
34
+
<p>Child này được đặt trong div cha.</p>
35
35
{createPortal(
36
-
<p>Phần tử con này được đặt trong document body.</p>,
36
+
<p>Child này được đặt trong phần body của tài liệu.</p>,
37
37
document.body
38
38
)}
39
39
</div>
40
40
```
41
41
42
42
[Xem thêm các ví dụ bên dưới.](#usage)
43
43
44
-
Một portal chỉ thay đổi vị trí vật lý của DOM node. Về mọi mặt khác, JSX bạn hiển thị vào một portal hoạt động như một node con của React component hiển thị nó. Ví dụ: phần tử con có thể truy cập context được cung cấp bởi cây cha và các event nổi lên từ con đến cha theo cây React.
44
+
Một portal chỉ thay đổi vị trí vật lý của nút DOM. Về mọi mặt khác, JSX bạn kết xuất vào một portal hoạt động như một nút con của thành phần React kết xuất nó. Ví dụ: child có thể truy cập ngữ cảnh được cung cấp bởi cây cha và các sự kiện nổi lên từ children lên cha theo cây React.
45
45
46
46
#### Tham số {/*parameters*/}
47
47
48
-
* `children`: Bất cứ thứ gì có thể được hiển thị bằng React, chẳng hạn như một đoạn JSX (ví dụ: `<div />` hoặc `<SomeComponent />`), một [Fragment](/reference/react/Fragment) (`<>...</>`), một chuỗi hoặc một số, hoặc một mảng các phần tử này.
48
+
* `children`: Bất cứ thứ gì có thể được kết xuất bằng React, chẳng hạn như một đoạn JSX (ví dụ: `<div />` hoặc `<SomeComponent />`), một [Fragment](/reference/react/Fragment) (`<>...</>`), một chuỗi hoặc một số, hoặc một mảng các phần tử này.
49
49
50
-
* `domNode`: Một số DOM node, chẳng hạn như những node được trả về bởi `document.getElementById()`. Node này phải đã tồn tại. Việc truyền một DOM node khác trong quá trình cập nhật sẽ khiến nội dung portal được tạo lại.
50
+
* `domNode`: Một số nút DOM, chẳng hạn như những nút được trả về bởi `document.getElementById()`. Nút phải đã tồn tại. Truyền một nút DOM khác trong quá trình cập nhật sẽ khiến nội dung cổng được tạo lại.
51
51
52
-
* **optional** `key`: Một chuỗi hoặc số duy nhất được sử dụng làm [key](/learn/rendering-lists/#keeping-list-items-in-order-with-key) của portal.
52
+
* **tùy chọn** `key`: Một chuỗi hoặc số duy nhất được sử dụng làm [key của portal.](/learn/rendering-lists/#keeping-list-items-in-order-with-key)
53
53
54
-
#### Giá trị trả về {/*returns*/}
54
+
#### Trả về {/*returns*/}
55
55
56
-
`createPortal` trả về một React node có thể được đưa vào JSX hoặc trả về từ một React component. Nếu React bắt gặp nó trong đầu ra hiển thị, nó sẽ đặt `children` đã cung cấp bên trong `domNode` đã cung cấp.
56
+
`createPortal` trả về một nút React có thể được đưa vào JSX hoặc được trả về từ một thành phần React. Nếu React gặp nó trong đầu ra kết xuất, nó sẽ đặt `children` đã cung cấp bên trong `domNode` đã cung cấp.
57
57
58
58
#### Lưu ý {/*caveats*/}
59
59
60
-
* Các event từ portal lan truyền theo cây React chứ không phải cây DOM. Ví dụ: nếu bạn nhấp vào bên trong một portal và portal được bao bọc trong `<div onClick>`, thì trình xử lý `onClick` đó sẽ kích hoạt. Nếu điều này gây ra sự cố, hãy dừng sự lan truyền event từ bên trong portal hoặc di chuyển chính portal lên trên trong cây React.
60
+
* Các sự kiện từ cổng lan truyền theo cây React chứ không phải cây DOM. Ví dụ: nếu bạn nhấp vào bên trong một cổng và cổng được bao bọc trong `<div onClick>`, trình xử lý `onClick` đó sẽ kích hoạt. Nếu điều này gây ra sự cố, hãy dừng lan truyền sự kiện từ bên trong cổng hoặc di chuyển chính cổng đó lên trên cây React.
61
61
62
62
---
63
63
64
64
## Cách sử dụng {/*usage*/}
65
65
66
-
### Hiển thị đến một phần khác của DOM {/*rendering-to-a-different-part-of-the-dom*/}
66
+
### Kết xuất đến một phần khác của DOM {/*rendering-to-a-different-part-of-the-dom*/}
67
67
68
-
*Portals* cho phép các component của bạn hiển thị một số phần tử con của chúng vào một vị trí khác trong DOM. Điều này cho phép một phần của component của bạn "thoát" khỏi bất kỳ container nào mà nó có thể ở trong đó. Ví dụ: một component có thể hiển thị một hộp thoại modal hoặc một tooltip xuất hiện phía trên và bên ngoài phần còn lại của trang.
68
+
*Portals* cho phép các thành phần của bạn kết xuất một số children của chúng vào một vị trí khác trong DOM. Điều này cho phép một phần của thành phần của bạn "thoát" khỏi bất kỳ vùng chứa nào mà nó có thể ở trong đó. Ví dụ: một thành phần có thể hiển thị một hộp thoại phương thức hoặc một chú giải công cụ xuất hiện phía trên và bên ngoài phần còn lại của trang.
69
69
70
-
Để tạo một portal, hãy hiển thị kết quả của `createPortal` với <CodeStep step={1}>một số JSX</CodeStep> và <CodeStep step={2}>DOM node nơi nó sẽ đi đến</CodeStep>:
70
+
Để tạo một portal, hãy kết xuất kết quả của `createPortal` với <CodeStep step={1}>một số JSX</CodeStep> và <CodeStep step={2}>nút DOM nơi nó sẽ đi</CodeStep>:
71
71
72
-
```js [[1, 8, "<p>This child is placed in the document body.</p>"], [2, 9, "document.body"]]
72
+
```js [[1, 8, "<p>Child này được đặt trong phần body của tài liệu.</p>"], [2, 9, "document.body"]]
73
73
import { createPortal } from'react-dom';
74
74
75
75
functionMyComponent() {
76
76
return (
77
77
<div style={{ border:'2px solid black' }}>
78
-
<p>Phần tử con này được đặt trong div cha.</p>
78
+
<p>Child này được đặt trong div cha.</p>
79
79
{createPortal(
80
-
<p>Phần tử con này được đặt trong document body.</p>,
80
+
<p>Child này được đặt trong phần body của tài liệu.</p>,
81
81
document.body
82
82
)}
83
83
</div>
84
84
);
85
85
}
86
86
```
87
87
88
-
React sẽ đặt các DOM node cho <CodeStep step={1}>JSX bạn đã truyền</CodeStep> vào bên trong <CodeStep step={2}>DOM node bạn đã cung cấp</CodeStep>.
88
+
React sẽ đặt các nút DOM cho <CodeStep step={1}>JSX bạn đã truyền</CodeStep> bên trong <CodeStep step={2}>nút DOM bạn đã cung cấp</CodeStep>.
89
89
90
90
Nếu không có portal, `<p>` thứ hai sẽ được đặt bên trong `<div>` cha, nhưng portal đã "dịch chuyển" nó vào [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)
91
91
@@ -97,9 +97,9 @@ import { createPortal } from 'react-dom';
97
97
exportdefaultfunctionMyComponent() {
98
98
return (
99
99
<div style={{ border:'2px solid black' }}>
100
-
<p>Phần tử con này được đặt trong div cha.</p>
100
+
<p>Child này được đặt trong div cha.</p>
101
101
{createPortal(
102
-
<p>Phần tử con này được đặt trong document body.</p>,
102
+
<p>Child này được đặt trong phần body của tài liệu.</p>,
103
103
document.body
104
104
)}
105
105
</div>
@@ -116,23 +116,23 @@ Lưu ý cách đoạn văn thứ hai xuất hiện trực quan bên ngoài `<div
116
116
<div id="root">
117
117
...
118
118
<div style="border: 2px solid black">
119
-
<p>Phần tử con này được đặt bên trong div cha.</p>
119
+
<p>Child này được đặt bên trong div cha.</p>
120
120
</div>
121
121
...
122
122
</div>
123
-
<p>Phần tử con này được đặt trong document body.</p>
123
+
<p>Child này được đặt trong phần body của tài liệu.</p>
124
124
</body>
125
125
```
126
126
127
-
Một portal chỉ thay đổi vị trí vật lý của DOM node. Về mọi mặt khác, JSX bạn hiển thị vào một portal hoạt động như một node con của React component hiển thị nó. Ví dụ: phần tử con có thể truy cập context được cung cấp bởi cây cha và các event vẫn nổi lên từ con đến cha theo cây React.
127
+
Một portal chỉ thay đổi vị trí vật lý của nút DOM. Về mọi mặt khác, JSX bạn kết xuất vào một portal hoạt động như một nút con của thành phần React kết xuất nó. Ví dụ: child có thể truy cập ngữ cảnh được cung cấp bởi cây cha và các sự kiện vẫn nổi lên từ children lên cha theo cây React.
128
128
129
129
---
130
130
131
-
### Hiển thị một hộp thoại modal bằng portal {/*rendering-a-modal-dialog-with-a-portal*/}
131
+
### Kết xuất hộp thoại phương thức bằng portal {/*rendering-a-modal-dialog-with-a-portal*/}
132
132
133
-
Bạn có thể sử dụng một portal để tạo một hộp thoại modal nổi phía trên phần còn lại của trang, ngay cả khi component triệu hồi hộp thoại nằm bên trong một container có `overflow: hidden` hoặc các style khác gây trở ngại cho hộp thoại.
133
+
Bạn có thể sử dụng một portal để tạo một hộp thoại phương thức nổi phía trên phần còn lại của trang, ngay cả khi thành phần triệu hồi hộp thoại nằm bên trong một vùng chứa có `overflow: hidden` hoặc các kiểu khác gây trở ngại cho hộp thoại.
134
134
135
-
Trong ví dụ này, hai container có các style làm gián đoạn hộp thoại modal, nhưng hộp thoại được hiển thị vào một portal không bị ảnh hưởng vì, trong DOM, modal không nằm trong các phần tử JSX cha.
135
+
Trong ví dụ này, hai vùng chứa có các kiểu làm gián đoạn hộp thoại phương thức, nhưng vùng chứa được kết xuất vào một portal không bị ảnh hưởng vì, trong DOM, phương thức không nằm trong các phần tử JSX cha.
136
136
137
137
<Sandpack>
138
138
@@ -163,7 +163,7 @@ export default function NoPortalExample() {
Điều quan trọng là đảm bảo rằng ứng dụng của bạn có thể truy cập được khi sử dụng portal. Ví dụ: bạn có thể cần quản lý focus bàn phím để người dùng có thể di chuyển focus vào và ra khỏi portal một cách tự nhiên.
240
+
Điều quan trọng là đảm bảo rằng ứng dụng của bạn có thể truy cập được khi sử dụng cổng. Ví dụ: bạn có thể cần quản lý tiêu điểm bàn phím để người dùng có thể di chuyển tiêu điểm vào và ra khỏi cổng một cách tự nhiên.
240
241
241
-
Hãy tuân theo [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) khi tạo modal. Nếu bạn sử dụng một gói cộng đồng, hãy đảm bảo rằng nó có thể truy cập được và tuân theo các nguyên tắc này.
242
+
Hãy tuân theo [Các phương pháp tạo phương thức WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) khi tạo phương thức. Nếu bạn sử dụng một gói cộng đồng, hãy đảm bảo rằng nó có thể truy cập được và tuân theo các nguyên tắc này.
242
243
243
244
</Pitfall>
244
245
245
246
---
246
247
247
-
### Hiển thị các React component vào markup server không phải React {/*rendering-react-components-into-non-react-server-markup*/}
248
+
### Kết xuất các thành phần React vào mã đánh dấu máy chủ không phải React {/*rendering-react-components-into-non-react-server-markup*/}
248
249
249
-
Portal có thể hữu ích nếu React root của bạn chỉ là một phần của một trang tĩnh hoặc được hiển thị trên server mà không được xây dựng bằng React. Ví dụ: nếu trang của bạn được xây dựng bằng một framework server như Rails, bạn có thể tạo các khu vực tương tác trong các khu vực tĩnh như sidebar. So với việc có [nhiều React root riêng biệt,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) portal cho phép bạn coi ứng dụng như một cây React duy nhất với trạng thái được chia sẻ ngay cả khi các phần của nó hiển thị đến các phần khác nhau của DOM.
250
+
Portals có thể hữu ích nếu gốc React của bạn chỉ là một phần của trang tĩnh hoặc được kết xuất trên máy chủ không được xây dựng bằng React. Ví dụ: nếu trang của bạn được xây dựng bằng một framework máy chủ như Rails, bạn có thể tạo các khu vực tương tác trong các khu vực tĩnh như thanh bên. So với việc có [nhiều gốc React riêng biệt,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) portals cho phép bạn coi ứng dụng như một cây React duy nhất với trạng thái được chia sẻ ngay cả khi các phần của nó kết xuất đến các phần khác nhau của DOM.
250
251
251
252
<Sandpack>
252
253
253
254
```html public/index.html
254
255
<!DOCTYPE html>
255
256
<html>
256
-
<head><title>Ứng dụng của tôi</title></head>
257
+
<head><title>My app</title></head>
257
258
<body>
258
-
<h1>Chào mừng đến với ứng dụng hybrid của tôi</h1>
259
+
<h1>Welcome to my hybrid app</h1>
259
260
<div class="parent">
260
261
<div class="sidebar">
261
-
Đây là markup không phải React của server
262
+
This is server non-React markup
262
263
<div id="sidebar-content"></div>
263
264
</div>
264
265
<div id="root"></div>
@@ -299,11 +300,11 @@ export default function App() {
299
300
}
300
301
301
302
functionMainContent() {
302
-
return<p>Phần này được hiển thị bởi React</p>;
303
+
return<p>This part is rendered by React</p>;
303
304
}
304
305
305
306
functionSidebarContent() {
306
-
return<p>Phần này cũng được hiển thị bởi React!</p>;
307
+
return<p>This part is also rendered by React!</p>;
307
308
}
308
309
```
309
310
@@ -340,15 +341,15 @@ p {
340
341
341
342
---
342
343
343
-
### Hiển thị các React component vào các DOM node không phải React {/*rendering-react-components-into-non-react-dom-nodes*/}
344
+
### Kết xuất các thành phần React vào các nút DOM không phải React {/*rendering-react-components-into-non-react-dom-nodes*/}
344
345
345
-
Bạn cũng có thể sử dụng một portal để quản lý nội dung của một DOM node được quản lý bên ngoài React. Ví dụ: giả sử bạn đang tích hợp với một widget bản đồ không phải React và bạn muốn hiển thị nội dung React bên trong một popup. Để thực hiện việc này, hãy khai báo một biến trạng thái `popupContainer` để lưu trữ DOM node mà bạn sẽ hiển thị vào:
346
+
Bạn cũng có thể sử dụng cổng để quản lý nội dung của một nút DOM được quản lý bên ngoài React. Ví dụ: giả sử bạn đang tích hợp với một tiện ích bản đồ không phải React và bạn muốn kết xuất nội dung React bên trong một cửa sổ bật lên. Để thực hiện việc này, hãy khai báo một biến trạng thái `popupContainer` để lưu trữ nút DOM mà bạn sẽ kết xuất vào:
0 commit comments