translate forwarding refs page

Author: huykon

content/docs/forwarding-refs.md

@@ -4,73 +4,73 @@ title: Forwarding Refs
 permalink: docs/forwarding-refs.html
 ---
 
-Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below.
+Ref forwarding là một kỹ thuật để tự động chuyển một [ref](/docs/refs-and-the-dom.html) qua một thành phần đến một trong các thành phần con của nó. Điều này thường không cần thiết đối với hầu hết các thành phần trong ứng dụng. Tuy nhiên, nó có thể hữu ích cho một số loại thành phần, đặc biệt là trong các thư viện thành phần có thể tái sử dụng. Các tình huống phổ biến nhất được mô tả dưới đây.
 
-## Forwarding refs to DOM components {#forwarding-refs-to-dom-components}
+## Forwarding refs tới các thành phần DOM {#forwarding-refs-to-dom-components}
 
-Consider a `FancyButton` component that renders the native `button` DOM element:
+Hãy xem xét thành phần `FancyButton` hiển thị phần tử DOM của `button` gốc:
 `embed:forwarding-refs/fancy-button-simple.js`
 
-React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much.
+Các thành phần React ẩn chi tiết triển khai của chúng, bao gồm cả đầu ra được hiển thị của chúng. Các thành phần khác sử dụng `FancyButton` **thường sẽ không cần** [lấy tham chiếu](/docs/refs-and-the-dom.html) đến phần tử DOM của `button` bên trong. Điều này là tốt vì nó ngăn các thành phần dựa vào cấu trúc DOM của nhau quá nhiều.
 
-Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations.
+Mặc dù việc đóng gói như vậy là mong muốn đối với các thành phần cấp ứng dụng như `FeedStory` hoặc `Comment`, nhưng nó có thể gây bất tiện cho các thành phần “leaf” có thể tái sử dụng cao như `FancyButton` hoặc `MyTextInput`. Các thành phần này có xu hướng được sử dụng trong toàn bộ ứng dụng theo cách tương tự như `button` và `input` DOM thông thường, và việc truy cập vào các nút DOM của chúng có thể không thể tránh khỏi để quản lý tiêu điểm, lựa chọn hoặc hoạt ảnh.
 
-**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.**
+**Ref forwarding là một tính năng chọn tham gia cho phép một số thành phần nhận `tham chiếu` mà chúng nhận được và chuyển tiếp nó xuống (nói cách khác, “chuyển tiếp” nó) cho thành phần con.**
 
-In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders:
+Trong ví dụ dưới đây, `FancyButton` sử dụng `React.forwardRef` để lấy `ref` được chuyển đến nó, sau đó chuyển tiếp nó đến DOM `button` mà nó hiển thị:
 
 `embed:forwarding-refs/fancy-button-simple-ref.js`
 
-This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly.
+Bằng cách này, các thành phần sử dụng `FancyButton` có thể nhận được tham chiếu đến DOM `button` bên dưới và truy cập nó nếu cần - giống như nếu chúng sử dụng trực tiếp DOM `button`.
 
-Here is a step-by-step explanation of what happens in the above example:
+Dưới đây là giải thích từng bước về những gì xảy ra trong ví dụ trên:
 
-1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable.
-1. We pass our `ref` down to `<FancyButton ref={ref}>` by specifying it as a JSX attribute.
-1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument.
-1. We forward this `ref` argument down to `<button ref={ref}>` by specifying it as a JSX attribute.
-1. When the ref is attached, `ref.current` will point to the `<button>` DOM node.
+1. Chúng ta tạo một [React ref](/docs/refs-and-the-dom.html) bằng cách gọi `React.createRef` và gán nó cho một biến` ref`.
+1. Chúng ta chuyển `ref` xuống`<FancyButton ref={ref}>` bằng cách chỉ định nó như một thuộc tính JSX.
+1. React chuyển `ref` tới hàm `(props, ref) => ...` bên trong `forwardRef` như một đối số thứ hai.
+1. Chúng ta chuyển tiếp đối số `ref` này xuống `<button ref={ref}>` bằng cách chỉ định nó làm thuộc tính JSX.
+1. Khi ref được đính kèm, `ref.current` sẽ trỏ đến nút DOM `<button>`.
 
->Note
+>Chú ý
 >
->The second `ref` argument only exists when you define a component with `React.forwardRef` call. Regular function or class components don't receive the `ref` argument, and ref is not available in props either.
+>Đối số `ref` thứ hai chỉ tồn tại khi bạn xác định một thành phần với lệnh gọi `React.forwardRef`. Các function hoặc class component thông thường không nhận được đối số `ref` và ref cũng không có sẵn trong các props.
 >
->Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too.
+>Ref forwarding không giới hạn đối với các thành phần DOM. Bạn cũng có thể chuyển tiếp các refs đến các cá thể thành phần của lớp.
 
-## Note for component library maintainers {#note-for-component-library-maintainers}
+## Lưu ý cho người bảo trì thư viện component {#note-for-component-library-maintainers}
 
-**When you start using `forwardRef` in a component library, you should treat it as a breaking change and release a new major version of your library.** This is because your library likely has an observably different behavior (such as what refs get assigned to, and what types are exported), and this can break apps and other libraries that depend on the old behavior.
+**Khi bạn bắt đầu sử dụng `forwardRef` trong thư viện component, bạn nên coi nó như một thay đổi đột phá và phát hành một phiên bản chính mới của thư viện của bạn.** Điều này là do thư viện của bạn có thể có một hành vi khác nhau có thể quan sát được (chẳng hạn như những ref được gán cho, và những loại được xuất ra) và điều này có thể phá vỡ các ứng dụng và thư viện khác phụ thuộc vào hành vi cũ.
 
-Conditionally applying `React.forwardRef` when it exists is also not recommended for the same reasons: it changes how your library behaves and can break your users' apps when they upgrade React itself.
+Việc áp dụng có điều kiện `React.forwardRef` khi nó tồn tại cũng không được khuyến khích vì những lý do tương tự: nó thay đổi cách thư viện của bạn hoạt động và có thể phá vỡ ứng dụng của người dùng khi họ tự nâng cấp React.
 
-## Forwarding refs in higher-order components {#forwarding-refs-in-higher-order-components}
+## Forwarding refs trong higher-order components {#forwarding-refs-in-higher-order-components}
 
-This technique can also be particularly useful with [higher-order components](/docs/higher-order-components.html) (also known as HOCs). Let's start with an example HOC that logs component props to the console:
+Kỹ thuật này cũng có thể đặc biệt hữu ích với [higher-order components](/docs/higher-order-components.html) (còn được gọi là HOCs). Hãy bắt đầu với một HOC mẫu logs ra các props vào console:
 `embed:forwarding-refs/log-props-before.js`
 
-The "logProps" HOC passes all `props` through to the component it wraps, so the rendered output will be the same. For example, we can use this HOC to log all props that get passed to our "fancy button" component:
+HOC "logProps" chuyển tất cả các `props` đến component mà nó bao bọc, vì vậy kết quả hiển thị sẽ giống nhau. Ví dụ, chúng ta có thể sử dụng HOC này để log lại tất cả các props được chuyển đến component "fancy button":
 `embed:forwarding-refs/fancy-button.js`
 
-There is one caveat to the above example: refs will not get passed through. That's because `ref` is not a prop. Like `key`, it's handled differently by React. If you add a ref to a HOC, the ref will refer to the outermost container component, not the wrapped component.
+Có một lưu ý cho ví dụ trên: refs sẽ không được chuyển qua. Đó là bởi vì `ref` không phải là một prop. Giống như `key`, nó được React xử lý theo cách khác. Nếu bạn thêm một ref vào HOC, ref này sẽ tham chiếu đến thành phần chứa ngoài cùng, không phải thành phần được bao bọc.
 
-This means that refs intended for our `FancyButton` component will actually be attached to the `LogProps` component:
+Điều này có nghĩa là các refs dành cho component `FancyButton` của chúng ta sẽ thực sự được gắn vào component `LogProps`:
 `embed:forwarding-refs/fancy-button-ref.js`
 
-Fortunately, we can explicitly forward refs to the inner `FancyButton` component using the `React.forwardRef` API. `React.forwardRef` accepts a render function that receives `props` and `ref` parameters and returns a React node. For example:
+May mắn thay, chúng ta có thể chuyển tiếp rõ ràng các refs đến thành phần `FancyButton` bên trong bằng cách sử dụng API `React.forwardRef`. `React.forwardRef` chấp nhận một hàm kết xuất nhận các tham số `props` và `ref` và trả về một nút React. Ví dụ:
 `embed:forwarding-refs/log-props-after.js`
 
-## Displaying a custom name in DevTools {#displaying-a-custom-name-in-devtools}
+## Hiển thị tên tùy chỉnh trong DevTools {#displaying-a-custom-name-in-devtools}
 
-`React.forwardRef` accepts a render function. React DevTools uses this function to determine what to display for the ref forwarding component.
+`React.forwardRef` chấp nhận một hàm kết xuất. React DevTools sử dụng chức năng này để xác định những gì sẽ hiển thị cho thành phần chuyển tiếp ref.
 
-For example, the following component will appear as "*ForwardRef*" in the DevTools:
+Ví dụ, thành phần sau sẽ xuất hiện dưới dạng "*ForwardRef*" trong DevTools.
 
 `embed:forwarding-refs/wrapped-component.js`
 
-If you name the render function, DevTools will also include its name (e.g. "*ForwardRef(myFunction)*"):
+Nếu bạn đặt tên cho hàm hiển thị, DevTools cũng sẽ bao gồm tên của nó (ví dụ: "*ForwardRef(myFunction)*"):
 
 `embed:forwarding-refs/wrapped-component-with-function-name.js`
 
-You can even set the function's `displayName` property to include the component you're wrapping:
+Bạn thậm chí có thể đặt thuộc tính `displayName` của hàm để bao gồm thành phần mà bạn đang gói:
 
 `embed:forwarding-refs/customized-display-name.js`