From 63d9b27b37a6399df8c7440db9135ae9f81b664a Mon Sep 17 00:00:00 2001 From: huykon225 Date: Wed, 15 Sep 2021 15:17:19 +0700 Subject: [PATCH 1/2] translate forwarding refs page --- content/docs/forwarding-refs.md | 62 ++++++++++++++++----------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3318d8499..5db0f28be 100644 --- a/content/docs/forwarding-refs.md +++ b/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 `` 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 `