Translate: Forwarding ref #118

eyeccc · 2019-12-20T08:07:42Z

translate to zh-hant

netlify · 2019-12-20T08:13:40Z

Deploy preview for zh-hant-reactjs-org ready!

Built with commit af9decd

https://deploy-preview-118--zh-hant-reactjs-org.netlify.com

neighborhood999

Hi @eyeccc, Thank you for helping!

I left some suggestions, if have any questions feel free left comments.

neighborhood999 · 2019-12-23T03:05:20Z

content/docs/forwarding-refs.md

 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 是一種自動把 [ref](/docs/refs-and-the-dom.html) 從一個元件傳遞到它底下的其中一個 child 的技巧。通常來說，應用程式裡大部分的元件都不需要用到它。然而，對某些種類的元件來說它很有用，特別是能夠重複使用的元件庫。以下會解釋最常見的情形。


Suggested change

傳送 ref 是一種自動把 [ref](/docs/refs-and-the-dom.html) 從一個元件傳遞到它底下的其中一個 child 的技巧。通常來說，應用程式裡大部分的元件都不需要用到它。然而，對某些種類的元件來說它很有用，特別是能夠重複使用的元件庫。以下會解釋最常見的情形。

傳送 ref 是一種自動把 [ref](/docs/refs-and-the-dom.html) 從一個 component 傳遞到它底下的其中一個 child 的技巧。通常來說，應用程式裡大部分的 component 都不需要用到它。然而，對某些種類的 component 來說它很有用，特別是能夠重複使用的函式庫。以下會解釋最常見的情形。

neighborhood999 · 2019-12-23T03:15:24Z

content/docs/forwarding-refs.md


-## Forwarding refs to DOM components {#forwarding-refs-to-dom-components}
+## 傳送 ref 到 DOM 元件 {#forwarding-refs-to-dom-components}


Suggested change

## 傳送 ref 到 DOM 元件 {#forwarding-refs-to-dom-components}

## 傳送 ref 到 DOM component {#forwarding-refs-to-dom-components}

neighborhood999 · 2019-12-23T03:27:13Z

content/docs/forwarding-refs.md


-Consider a `FancyButton` component that renders the native `button` DOM element:
-`embed:forwarding-refs/fancy-button-simple.js`
+試著考慮一個叫做 `FancyButton` 的元件，它會 render 一個原生的 `button` DOM element：`embed:forwarding-refs/fancy-button-simple.js`


Suggested change

試著考慮一個叫做 `FancyButton` 的元件，它會 render 一個原生的 `button` DOM element：`embed:forwarding-refs/fancy-button-simple.js`

試著考慮一個叫做 `FancyButton` 的 component，它會 render 一個原生的 `button` DOM element：`embed:forwarding-refs/fancy-button-simple.js`

neighborhood999 · 2019-12-23T03:27:49Z

content/docs/forwarding-refs.md


-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.
+React 元件會隱藏包含 render 的結果在內的實作細節。其他使用到 `FancyButton` 的元件**通常不需要**獲得內部按鈕的 DOM element 的 [ref](/docs/refs-and-the-dom.html)。這樣帶來的好處是，我們能夠避免讓其他元件過度依賴彼此的 DOM 的結構。


Suggested change

React 元件會隱藏包含 render 的結果在內的實作細節。其他使用到 `FancyButton` 的元件**通常不需要**獲得內部按鈕的 DOM element 的 [ref](/docs/refs-and-the-dom.html)。這樣帶來的好處是，我們能夠避免讓其他元件過度依賴彼此的 DOM 的結構。

React component 會隱藏包含 render 的結果在內的實作細節。其他使用到 `FancyButton` 的 component **通常不需要**獲得內部按鈕的 DOM element 的 [ref](/docs/refs-and-the-dom.html)。這樣帶來的好處是，我們能夠避免讓其他 component 過度依賴彼此的 DOM 的結構。

neighborhood999 · 2019-12-23T03:29:08Z

content/docs/forwarding-refs.md


-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.
+雖然這樣的封裝對於應用程式層級的元件（像是 `FeedStory` 或 `Comment`）來說是我們所希望擁有的，但對於常用的「末端」元件，像是 `FancyButton` 或 `MyTextInput` 來說，可能會變得不方便使用。這些末端元件通常會像普通的 DOM `button` 和 `input` 一樣，在應用程式的各個地方被使用，在處理 focus、選取或動畫時，獲取它們的 DOM 節點可能是不可避免的。


Suggested change

雖然這樣的封裝對於應用程式層級的元件（像是 `FeedStory` 或 `Comment`）來說是我們所希望擁有的，但對於常用的「末端」元件，像是 `FancyButton` 或 `MyTextInput` 來說，可能會變得不方便使用。這些末端元件通常會像普通的 DOM `button` 和 `input` 一樣，在應用程式的各個地方被使用，在處理 focus、選取或動畫時，獲取它們的 DOM 節點可能是不可避免的。

雖然這樣的封裝對於應用程式層級的 component（像是 `FeedStory` 或 `Comment`）來說是我們所希望擁有的，但對於常用的「末端」 component，像是 `FancyButton` 或 `MyTextInput` 來說，可能會變得不方便使用。這些末端 component 通常會像普通的 DOM `button` 和 `input` 一樣，在應用程式的各個地方被使用，在處理 focus、選取或動畫時，獲取它們的 DOM 節點可能是不可避免的。

By the way, I prefer 取得 than 獲取, feel free if you want to change.

neighborhood999 · 2019-12-23T03:36:35Z

content/docs/forwarding-refs.md


-`React.forwardRef` accepts a render function. React DevTools uses this function to determine what to display for the ref forwarding component.
+`React.forwardRef` 接受一個 render 函式。React DevTool 使用這個函式來決定這個傳送 ref 的元件該顯示什麼。


Suggested change

`React.forwardRef` 接受一個 render 函式。React DevTool 使用這個函式來決定這個傳送 ref 的元件該顯示什麼。

`React.forwardRef` 接受一個 render function。React DevTool 使用這個 function 來決定這個傳送 ref 的 component 該顯示什麼。

neighborhood999 · 2019-12-23T03:36:54Z

content/docs/forwarding-refs.md


-For example, the following component will appear as "*ForwardRef*" in the DevTools:
+例如，在 DevTool 裡，這個傳送的元件會顯示為 「*ForwardRef*」：


Suggested change

例如，在 DevTool 裡，這個傳送的元件會顯示為「*ForwardRef*」：

例如，在 DevTool 裡，這個傳送的 component 會顯示為「*ForwardRef*」：

neighborhood999 · 2019-12-23T03:37:30Z

content/docs/forwarding-refs.md

-1. When the ref is attached, `ref.current` will point to the `<button>` DOM node.
+1. 我們藉由呼叫 `React.createRef` 產生了一個 [React ref](/docs/refs-and-the-dom.html)，然後將它賦值於叫做 `ref` 的變數裡。
+1. 我們藉由把 `ref` 當成一個 JSX attribute 來把它傳遞到 `<FancyButton ref={ref}>`。
+1. React 把 `ref` 當作第二個變數傳到 `forwardRef` 裡的 `(props, ref) => ...` 函式。


Suggested change

1. React 把 `ref` 當作第二個變數傳到 `forwardRef` 裡的 `(props, ref) => ...` 函式。

1. React 把 `ref` 當作第二個變數傳到 `forwardRef` 裡的 `(props, ref) => ...` function。

neighborhood999 · 2019-12-23T03:38:23Z

content/docs/forwarding-refs.md


 `embed:forwarding-refs/wrapped-component.js`

-If you name the render function, DevTools will also include its name (e.g. "*ForwardRef(myFunction)*"):
+如果你對 render 函式取名，DevTool 會包含它的名字（例如：「*ForwardRef(myFunction)*」）：


Suggested change

如果你對 render 函式取名，DevTool 會包含它的名字（例如：「*ForwardRef(myFunction)*」）：

如果你對 render function 取名，DevTool 會包含它的名字（例如：「*ForwardRef(myFunction)*」）：

neighborhood999 · 2019-12-23T03:38:34Z

content/docs/forwarding-refs.md


 `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:
+你也可以設定函式的 `displayName` 來包裹你的元件：


Suggested change

你也可以設定函式的 `displayName` 來包裹你的元件：

你也可以設定 function 的 `displayName` 來包裹你的元件：

eyeccc · 2019-12-24T09:56:44Z

hey @neighborhood999
i updated based on your suggestion
thanks

eyeccc added 2 commits December 20, 2019 15:54

doc: translating forwarding refs to zh-hant

7453a63

doc: polish translation

b1dd66b

eyeccc mentioned this pull request Dec 20, 2019

[OLD] Legacy Traditional Chinese Translation Progress #1

Closed

92 tasks

neighborhood999 added the Review Needed label Dec 20, 2019

neighborhood999 reviewed Dec 23, 2019

View reviewed changes

neighborhood999 added Revision Needed and removed Review Needed labels Dec 23, 2019

polish based on review

af9decd

neighborhood999 approved these changes Dec 25, 2019

View reviewed changes

neighborhood999 added Completed and removed Revision Needed labels Dec 25, 2019

neighborhood999 merged commit 4be4791 into reactjs:master Dec 25, 2019

eyeccc deleted the forwarding-ref branch December 25, 2019 02:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translate: Forwarding ref #118

Translate: Forwarding ref #118

eyeccc commented Dec 20, 2019

netlify bot commented Dec 20, 2019 •

edited

Loading

neighborhood999 left a comment

neighborhood999 Dec 23, 2019

neighborhood999 Dec 23, 2019

neighborhood999 Dec 23, 2019

neighborhood999 Dec 23, 2019

neighborhood999 Dec 23, 2019

neighborhood999 Dec 23, 2019

neighborhood999 Dec 23, 2019

neighborhood999 Dec 23, 2019

neighborhood999 Dec 23, 2019

neighborhood999 Dec 23, 2019

eyeccc commented Dec 24, 2019

	傳送 ref 是一種自動把 [ref](/docs/refs-and-the-dom.html) 從一個元件傳遞到它底下的其中一個 child 的技巧。通常來說，應用程式裡大部分的元件都不需要用到它。然而，對某些種類的元件來說它很有用，特別是能夠重複使用的元件庫。以下會解釋最常見的情形。
	傳送 ref 是一種自動把 [ref](/docs/refs-and-the-dom.html) 從一個 component 傳遞到它底下的其中一個 child 的技巧。通常來說，應用程式裡大部分的 component 都不需要用到它。然而，對某些種類的 component 來說它很有用，特別是能夠重複使用的函式庫。以下會解釋最常見的情形。


		## Forwarding refs to DOM components {#forwarding-refs-to-dom-components}
		## 傳送 ref 到 DOM 元件 {#forwarding-refs-to-dom-components}

	## 傳送 ref 到 DOM 元件 {#forwarding-refs-to-dom-components}
	## 傳送 ref 到 DOM component {#forwarding-refs-to-dom-components}

	試著考慮一個叫做 `FancyButton` 的元件，它會 render 一個原生的 `button` DOM element：`embed:forwarding-refs/fancy-button-simple.js`
	試著考慮一個叫做 `FancyButton` 的 component，它會 render 一個原生的 `button` DOM element：`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.
		React 元件會隱藏包含 render 的結果在內的實作細節。其他使用到 `FancyButton` 的元件通常不需要獲得內部按鈕的 DOM element 的 [ref](/docs/refs-and-the-dom.html)。這樣帶來的好處是，我們能夠避免讓其他元件過度依賴彼此的 DOM 的結構。

	React 元件會隱藏包含 render 的結果在內的實作細節。其他使用到 `FancyButton` 的元件通常不需要獲得內部按鈕的 DOM element 的 [ref](/docs/refs-and-the-dom.html)。這樣帶來的好處是，我們能夠避免讓其他元件過度依賴彼此的 DOM 的結構。
	React component 會隱藏包含 render 的結果在內的實作細節。其他使用到 `FancyButton` 的 component 通常不需要獲得內部按鈕的 DOM element 的 [ref](/docs/refs-and-the-dom.html)。這樣帶來的好處是，我們能夠避免讓其他 component 過度依賴彼此的 DOM 的結構。


		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.
		雖然這樣的封裝對於應用程式層級的元件（像是 `FeedStory` 或 `Comment`）來說是我們所希望擁有的，但對於常用的「末端」元件，像是 `FancyButton` 或 `MyTextInput` 來說，可能會變得不方便使用。這些末端元件通常會像普通的 DOM `button` 和 `input` 一樣，在應用程式的各個地方被使用，在處理 focus、選取或動畫時，獲取它們的 DOM 節點可能是不可避免的。


		`React.forwardRef` accepts a render function. React DevTools uses this function to determine what to display for the ref forwarding component.
		`React.forwardRef` 接受一個 render 函式。React DevTool 使用這個函式來決定這個傳送 ref 的元件該顯示什麼。

	`React.forwardRef` 接受一個 render 函式。React DevTool 使用這個函式來決定這個傳送 ref 的元件該顯示什麼。
	`React.forwardRef` 接受一個 render function。React DevTool 使用這個 function 來決定這個傳送 ref 的 component 該顯示什麼。


		For example, the following component will appear as "ForwardRef" in the DevTools:
		例如，在 DevTool 裡，這個傳送的元件會顯示為「ForwardRef」：

	例如，在 DevTool 裡，這個傳送的元件會顯示為「ForwardRef」：
	例如，在 DevTool 裡，這個傳送的 component 會顯示為「ForwardRef」：

	1. React 把 `ref` 當作第二個變數傳到 `forwardRef` 裡的 `(props, ref) => ...` 函式。
	1. React 把 `ref` 當作第二個變數傳到 `forwardRef` 裡的 `(props, ref) => ...` function。

	如果你對 render 函式取名，DevTool 會包含它的名字（例如：「ForwardRef(myFunction)」）：
	如果你對 render function 取名，DevTool 會包含它的名字（例如：「ForwardRef(myFunction)」）：

	你也可以設定函式的 `displayName` 來包裹你的元件：
	你也可以設定 function 的 `displayName` 來包裹你的元件：

Translate: Forwarding ref #118

Translate: Forwarding ref #118

Conversation

eyeccc commented Dec 20, 2019

netlify bot commented Dec 20, 2019 • edited Loading

neighborhood999 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eyeccc commented Dec 24, 2019

netlify bot commented Dec 20, 2019 •

edited

Loading