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: content/docs/portals.md
+14-14Lines changed: 14 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -4,17 +4,17 @@ title: Portals
4
4
permalink: docs/portals.html
5
5
---
6
6
7
-
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
7
+
Portals cung cấp một cách hạng nhất để kết xuất phần tử con thành một nút DOM tồn tại bên ngoài phân cấp DOM của thành phần cha.
8
8
9
9
```js
10
10
ReactDOM.createPortal(child, container)
11
11
```
12
12
13
-
The first argument (`child`) is any [renderable React child](/docs/react-component.html#render), such as an element, string, or fragment. The second argument (`container`) is a DOM element.
13
+
Đối số đầu tiên (`child`) là bất kỳ [phần tử con nào của React có thể kết xuất được](/docs/react-component.html#render), chẳng hạn như một phần tử, chuỗi, hoặc đoạn. Đối số thứ hai (`container`) là một phần tử DOM.
14
14
15
-
## Usage {#usage}
15
+
## Sử dụng {#usage}
16
16
17
-
Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node:
17
+
Thông thường, khi bạn trả về một phần tử từ phương thức kết xuất của một thành phần, nó sẽ được gắn vào DOM dưới dạng phần tử con của nút cha gần nhất:
18
18
19
19
```js{4,6}
20
20
render() {
@@ -27,7 +27,7 @@ render() {
27
27
}
28
28
```
29
29
30
-
However, sometimes it's useful to insert a child into a different location in the DOM:
30
+
Tuy nhiên, đôi khi sẽ hữu ích nếu chèn một phần tử con vào một vị trí khác trong DOM:
31
31
32
32
```js{6}
33
33
render() {
@@ -40,21 +40,21 @@ render() {
40
40
}
41
41
```
42
42
43
-
A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltips.
43
+
Một trường hợp điển hình sử dụng cho các portals là khi một thành phần cha có kiểu `overflow: hidden` or `z-index`, nhưng bạn cần thành phần con “thoát ra” khỏi vùng chứa của nó một cách trực quan. Ví dụ: hộp thoại, thẻ di chuột và chú giải công cụ.
44
44
45
-
> Note:
45
+
> Chú ý:
46
46
>
47
-
> When working with portals, remember that [managing keyboard focus](/docs/accessibility.html#programmatically-managing-focus)becomes very important.
47
+
> Khi làm việc với các portals, hãy nhớ rằng việc [quản lý tiêu điểm bàn phím](/docs/accessibility.html#programmatically-managing-focus)trở nên rất quan trọng.
48
48
>
49
-
> For modal dialogs, ensure that everyone can interact with them by following the[WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
49
+
> Đối với modal dialogs, hãy đảm bảo rằng mọi người đều có thể tương tác với chúng bằng cách tuân theo[WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
50
50
51
51
[**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
52
52
53
-
## Event Bubbling Through Portals {#event-bubbling-through-portals}
53
+
## Sự Kiện Bong Bóng qua Portals {#event-bubbling-through-portals}
54
54
55
-
Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the*React tree*regardless of position in the*DOM tree*.
55
+
Mặc dù một portal có thể ở bất kỳ đâu trong DOM tree, nhưng theo mọi cách khác, nó hoạt động giống như một React con bình thường. Các tính năng như ngữ cảnh hoạt động giống hệt nhau bất kể thành phần con có phải là portal hay không, vì portal vẫn tồn tại trong*React tree*bất kể vị trí trong*DOM tree*.
56
56
57
-
This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*. Assuming the following HTML structure:
57
+
Điều này bao gồm sự kiện bong bóng. Một sự kiện được kích hoạt từ bên trong portal sẽ truyền đến ancestors trong *React tree* có chứa, ngay cả khi những phần tử đó không phải là ancestors trong *DOM tree*. Giả sử cấu trúc HTML sau:
58
58
59
59
```html
60
60
<html>
@@ -65,7 +65,7 @@ This includes event bubbling. An event fired from inside a portal will propagate
65
65
</html>
66
66
```
67
67
68
-
A `Parent`component in `#app-root`would be able to catch an uncaught, bubbling event from the sibling node`#modal-root`.
68
+
Một thành phần `Parent`trong `#app-root`sẽ có thể bắt được một sự kiện bong bóng chưa được giải quyết từ nút anh chị em`#modal-root`.
[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
153
153
154
-
Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `<Modal />` component, the parent can capture its events regardless of whether it's implemented using portals.
154
+
Việc nắm bắt một sự kiện xảy ra từ một portal trong thành phần cha cho phép phát triển các tính năng trừu tượng linh hoạt hơn vốn không phụ thuộc vào các portal. Ví dụ: nếu bạn hiển thị một thành phần `<Modal />`, thành phần gốc có thể nắm bắt các sự kiện của nó bất kể nó có được triển khai bằng portal hay không.
0 commit comments