doc: translate uncontrolled components to zh-hant #106
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Deploy preview for zh-hant-reactjs-org ready! Built with commit 5a11255 |
92 tasks
| @@ -1,14 +1,14 @@ | |||
| --- | |||
| id: uncontrolled-components | |||
| title: Uncontrolled Components | |||
| title: 不可控制元件 | |||
There was a problem hiding this comment.
Suggested change
| title: 不可控制元件 | |
| title: Uncontrolled Component |
We reserve the uncontrolled term in the previous translation.
See:
| permalink: docs/uncontrolled-components.html | ||
| --- | ||
|
|
||
| In most cases, we recommend using [controlled components](/docs/forms.html#controlled-components) to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. | ||
| 在大多數的情況下，我們推薦使用[控制元件](/docs/forms.html#controlled-components)來實作表單。在控制元件裡，表單的資料是被 React 元件所處理。另一個選擇是非控制元件，表單的資料是由 DOM 本身所處理的。 |
There was a problem hiding this comment.
Suggested change
| 在大多數的情況下，我們推薦使用[控制元件](/docs/forms.html#controlled-components)來實作表單。在控制元件裡，表單的資料是被 React 元件所處理。另一個選擇是非控制元件，表單的資料是由 DOM 本身所處理的。 | |
| 在大多數的情況下，我們推薦使用[控制元件](/docs/forms.html#controlled-components)來實作表單。在控制元件裡，表單的資料是被 React component 所處理。另一個選擇是非控制元件，表單的資料是由 DOM 本身所處理的。 |
| @@ -37,15 +37,16 @@ class NameForm extends React.Component { | |||
| } | |||
| ``` | |||
|
|
|||
| [**Try it on CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010) | |||
| [**在 CodePen 試試看**](https://codepen.io/gaearon/pen/WooRWa?editors=0010) | |||
There was a problem hiding this comment.
Following our translation convention:
Suggested change
| [**在 CodePen 試試看**](https://codepen.io/gaearon/pen/WooRWa?editors=0010) | |
| [**在 CodePen 上試試看！**](https://codepen.io/gaearon/pen/WooRWa?editors=0010) |
|
|
||
| Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components. | ||
| 因為不可控制元件保持了 DOM 裡的真理源頭，有的時候使用不可控制元件時更容易整合 React 和非 React 的程式碼。如果你想有個又快又髒的方法，它也可以減少一些程式碼。否則，通常應使用控制元件。 |
There was a problem hiding this comment.
Suggested change
| 因為不可控制元件保持了 DOM 裡的真理源頭，有的時候使用不可控制元件時更容易整合 React 和非 React 的程式碼。如果你想有個又快又髒的方法，它也可以減少一些程式碼。否則，通常應使用控制元件。 | |
| 由於 uncontrolled component 保持了 DOM 裡的唯一的真相來源，有的時候使用 uncontrolled component 時更容易整合 React 和非 React 的程式碼。如果你想有個又快又髒的方法，它也可以減少一些程式碼。否則，通常應使用 controlled component。 |
|
|
||
| If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful. | ||
| 如果仍不清楚在特定情況下應使用哪種類型的元件，你可能會覺得 |
There was a problem hiding this comment.
Combine line 44 and 45:
Suggested change
| 如果仍不清楚在特定情況下應使用哪種類型的元件，你可能會覺得 | |
| 如果仍不清楚在特定情況下應使用哪種類型的 component，你可能會覺得 |
|
|
||
| In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`. | ||
| 在 React 的 rendering 生命週期裡，表單上的 `value` 屬性會覆寫掉 DOM 的值。在不可控制元件裡，你常常會希望 React 去指定初始值，但讓之後的更新保持不可控制的。為了處理這種情況，你可以指定 `defaultValue` 屬性而非 `value`。 |
There was a problem hiding this comment.
Suggested change
| 在 React 的 rendering 生命週期裡，表單上的 `value` 屬性會覆寫掉 DOM 的值。在不可控制元件裡，你常常會希望 React 去指定初始值，但讓之後的更新保持不可控制的。為了處理這種情況，你可以指定 `defaultValue` 屬性而非 `value`。 | |
| 在 React 的 render 生命週期裡，表單上的 `value` attribute 會覆寫掉 DOM 的值。在 uncontrolled component 裡，你常常會希望 React 去指定初始值，但讓之後的更新保持不可控制的。為了處理這種情況，你可以指定 `defaultValue` attribute 而非 `value`。 |
See: https://github.com/reactjs/zh-hant.reactjs.org/wiki/Glossary
|
|
||
| ```html | ||
| <input type="file" /> | ||
| ``` | ||
|
|
||
| In React, an `<input type="file" />` is always an uncontrolled component because its value can only be set by a user, and not programmatically. | ||
| 在 React 裡，`<input type="file" />` 永遠都是不可控制元件，因為它的值只能被使用者設定，而無法由程式碼來設定。 |
|
|
||
| `embed:uncontrolled-components/input-type-file.js` | ||
|
|
||
| [](codepen://uncontrolled-components/input-type-file) | ||
| [在 CodePen 試試看](codepen://uncontrolled-components/input-type-file) |
There was a problem hiding this comment.
Suggested change
| [在 CodePen 試試看](codepen://uncontrolled-components/input-type-file) | |
| [在 CodePen 試試看上](codepen://uncontrolled-components/input-type-file) |
Don't add ** symbol in the here, it will broken, ref #110
neighborhood999
added
Revision Needed
and removed
In Review
|
@neighborhood999 Thanks for reviewing. Just updated. |
neighborhood999
approved these changes
Nov 7, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
doc: translate uncontrolled components to zh-hant