Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc: translate dom-elements #40

Merged
merged 4 commits into from
Apr 13, 2019

Conversation

piovischioh
Copy link
Contributor

@piovischioh piovischioh commented Mar 19, 2019

Besides words mentioned in Glossary, I remain these untranslated.

  • server/client (side)
  • style
  • timestamp
  • key
  • property
  • pixel
  • camelCase
  • controlled component

Welcome for further discussion.

@netlify
Copy link

netlify bot commented Mar 19, 2019

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

Built with commit 526968e

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

Copy link
Member

@neighborhood999 neighborhood999 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for translation.

content/docs/reference-dom-elements.md Outdated Show resolved Hide resolved
content/docs/reference-dom-elements.md Outdated Show resolved Hide resolved

### checked {#checked}

The `checked` attribute is supported by `<input>` components of type `checkbox` or `radio`. You can use it to set whether the component is checked. This is useful for building controlled components. `defaultChecked` is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted.
當 `<input>` type `checkbox` 或是 `radio` 時,可以使用 `checked` 這個 attribute 來設置 component 是否被選取。這對建立 controlled component 很有幫助。`defaultChecked` 則是使用在 uncontrolled component,當初始 mount 後設置 component 是否被選取。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`<input>` 的 type 是 `checkbox` 或是 `radio` 時,可以使用 `checked` 這個 attribute 來設置 component 是否被選取。這對建立 controlled component 很有幫助`defaultChecked` 則是使用在 uncontrolled component,當初始 mount 後設置 component 是否被選取。
`<input>` 的 type 是 `checkbox` 或是 `radio` 時,可以使用 `checked` 這個 attribute 來設定 component 是否被選取。這對於建立被控制的 component 非常有用`defaultChecked` 則是使用在非被控制的 component,在初始 mount 後,設定 component 是否被選取。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest controlled component should stay untranslated as in #23 since it appears quite often and people need to google it together with their questions.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although It is synonymous, I think 設置 would be more comprehensive and elegant.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had discussed with @chloewlin about controlled component and uncontrolled component this terms, you are right, let's keep the original terms in here.


### dangerouslySetInnerHTML {#dangerouslysetinnerhtml}

`dangerouslySetInnerHTML` is React's replacement for using `innerHTML` in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out `dangerouslySetInnerHTML` and pass an object with a `__html` key, to remind yourself that it's dangerous. For example:
`dangerouslySetInnerHTML` React 用來替代 DOM 的 `innerHTML`。普遍來說,從程式碼中注入 HTML 是個冒險的行為,你會很輕易地讓使用者暴露在 [cross-site scripting (XSS)](https://zh.wikipedia.org/wiki/跨網站指令碼) 風險之下。所以在 React 裡你還是可以直接注入 HTML,但是你必須使用 `dangerouslySetInnerHTML`,然後傳入一個有 `__html` key 的 object,藉此來提醒你自己這樣做具有風險。例子如下:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`dangerouslySetInnerHTML` 是 React 用來替代 DOM 的 `innerHTML`。普遍來說,從程式碼中注入 HTML 是個冒險的行為,你會很輕易地讓使用者暴露在 [cross-site scripting (XSS)](https://zh.wikipedia.org/wiki/跨網站指令碼) 風險之下。所以在 React 裡你還是可以直接注入 HTML,但是你必須使用 `dangerouslySetInnerHTML`,然後傳入一個有 `__html` 為 key 的 object,藉此來提醒你自己這樣做具有風險。例子如下
`dangerouslySetInnerHTML` 是 React 用來替代 DOM 的 `innerHTML`。普遍來說,從程式碼中注入 HTML 是個冒險的行為,你會很輕易地讓使用者暴露在 [cross-site scripting (XSS)](https://zh.wikipedia.org/wiki/Cross-site_scripting) 攻擊之下。所以在 React 裡你還是可以直接注入 HTML,但是你必須使用 `dangerouslySetInnerHTML`,然後傳入一個有 `__html` 為 key 的 object,藉此來提醒你自己這樣做具有風險。例如

Copy link
Contributor Author

@piovischioh piovischioh Apr 7, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better to have equivalent links in Chinese according to the guide.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for missing this translate style guide.


### selected {#selected}

The `selected` attribute is supported by `<option>` components. You can use it to set whether the component is selected. This is useful for building controlled components.
`selected` 這個 attribute 可以使用在 `<option>` 裡面,用來設置 component 是否已被選取。這對建立 controlled component 很有幫助。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`selected` 這個 attribute 可以使用在 `<option>` 裡面,用來設置 component 是否已被選取。這對建立 controlled component 很有幫助。
`selected` 這個 attribute 可以使用在 `<option>` 裡面,用來設置 component 是否已被選取。這對建立被控制的 component 很有幫助。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above

content/docs/reference-dom-elements.md Outdated Show resolved Hide resolved
content/docs/reference-dom-elements.md Outdated Show resolved Hide resolved
content/docs/reference-dom-elements.md Outdated Show resolved Hide resolved
content/docs/reference-dom-elements.md Outdated Show resolved Hide resolved
content/docs/reference-dom-elements.md Outdated Show resolved Hide resolved
@neighborhood999 neighborhood999 added In Review Currently under review and removed Review Needed labels Mar 28, 2019
@piovischioh
Copy link
Contributor Author

Fixed and updated!

@neighborhood999
Copy link
Member

@piovischioh thank you for translation, I merged it.

@neighborhood999 neighborhood999 merged commit 5bad506 into reactjs:master Apr 13, 2019
@neighborhood999 neighborhood999 added Completed and removed In Review Currently under review labels Apr 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants