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

Translate DOM Elements and SyntheticEvent pages #39

Merged
merged 4 commits into from
Jun 30, 2019

Conversation

hweeTan
Copy link
Contributor

@hweeTan hweeTan commented Jun 4, 2019

No description provided.

@netlify
Copy link

netlify bot commented Jun 4, 2019

Deploy preview for vi-reactjs-org ready!

Built with commit da72bfa

https://deploy-preview-39--vi-reactjs-org.netlify.com

@ltmylinh
Copy link
Collaborator

Hi @cuongtran8 , Can you help us review this PR? Many thanks.

@@ -14,27 +14,27 @@ redirect_from:
- "tips/dangerously-set-inner-html.html"
---

React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations.
React áp dụng hệ thống DOM không phụ thuộc vào trình duyệt để tăng hiệu suất và độ tương thích với nhiều trình duyệt khác nhau. Nhân dịp này, chúng tôi đã chỉnh sửa một vài điểm không tương đồng trong cách làm việc với DOM của các trình duyệt.
Copy link
Collaborator

Choose a reason for hiding this comment

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

chỉnh sửa một vài điểm không tương đồng trong cách làm việc với DOM của các trình duyệt.

->loại bỏ một số khía cạnh chưa hoàn chỉnh trong cách triển khai DOM trên trình duyệt


In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute `tabindex` corresponds to the attribute `tabIndex` in React. The exception is `aria-*` and `data-*` attributes, which should be lowercased. For example, you can keep `aria-label` as `aria-label`.
Trong React, thuộc tính DOM va các sự kiện (properties attributes, vd như id, class, value, data-attr, onclick, ...) phải được viết theo camelCase. Ví dụ như attribute `tabindex`, thì trong React là `tabIndex`. Có những ngoại lệ là thuộc tính `aria-*` `data-*` phải được viết chữ thường. Ví dụ `aria-label` vẫn là `aria-label`.
Copy link
Collaborator

Choose a reason for hiding this comment

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

thuộc tính DOM va các sự kiện

-> tất cả các thuộc tính của DOM (bao gồm xử lí sự kiện)

vd như id, class, value, data-attr, onclick, ...)

-> trong bản gốc không có cụm từ này, mình nghĩ nên dịch sát nghĩa và gần với bản gốc nhất có thể.


There are a number of attributes that work differently between React and HTML:
Có một số sự khác biệt trong cách thuộc tính hoạt động trong React so với HTML:
Copy link
Collaborator

Choose a reason for hiding this comment

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

Có một số sự khác biệt trong cách thuộc tính hoạt động trong React so với HTML:

-> có một vài thuộc tính hoạt động khác biệt giữa React và HTML


### 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.
Thuộc tính `checked` trong các `<input>` type `checkbox` `radio` được dùng để tạo controlled components, xem mục Controlled Components để biết thêm. `defaultChecked` được dùng để đặt giá trị ban đầu của input, được dùng để tạo Uncontrolled Components.
Copy link
Collaborator

Choose a reason for hiding this comment

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

Thuộc tính checked trong các <input> có type là checkboxradio. ...

-> thuộc tính checked``được hỗ trợ bởi các component inputvới kiểucheckboxhoặcradio`. Bạn có thể dùng nó để thiết lập cho component có được checked hay chưa. Điều này hữu ích khi xây dựng những component kiểm soát...


### className {#classname}

To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `<div>`, `<a>`, and others.
Để đặt CSS class cho các thẻ DOM hay SVG như `div`, `a`, ..., chúng ta sử dụng `className` thay vì `class` như thường lệ do bị đụng với từ khoá của ES6 class.
Copy link
Collaborator

Choose a reason for hiding this comment

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

Để đặt CSS class cho các thẻ DOM hay SVG như div, a, ..., chúng ta sử dụng className thay vì class như thường lệ do bị đụng với từ khoá của ES6 class.

-> để đặt class css, sử dụng thuộc tính className. Nó được sử dụng cho tất cả các phần tử DOM và SVG như ....


React will automatically append a "px" suffix to certain numeric inline style properties. If you want to use units other than "px", specify the value as a string with the desired unit. For example:
React sẽ tự động thêm "px" vào sau các giá trị số. Nếu bạn muốn sử dụng đơn vị khác, hãy dùng kiểu string thay vì number, vd:
Copy link
Collaborator

@cuongtran8 cuongtran8 Jun 5, 2019

Choose a reason for hiding this comment

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

React sẽ tự động thêm "px" vào sau các giá trị số. Nếu bạn muốn sử dụng đơn vị khác, hãy dùng kiểu string thay vì number, vd:

-> React sẽ tự động thêm hậu tố "px" vào sau một vài kiểu thuộc tính số inline nhất định. Nếu bạn muốn sử dụng đơn vị khác, hãy chỉ định giá trị như là một chuỗi với đơn vị bạn muốn, ví dụ:

@@ -106,37 +108,39 @@ React will automatically append a "px" suffix to certain numeric inline style pr
</div>
```

Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59).
Không phải thuộc tính nào cũng được thêm "px" vào sau. Các thuộc tính không có đơn vị sẽ được giữ nguyên, vd như `zoom`, `order`, `flex`. Tất cả các thuộc tính không có đơn vị có thể được tìm thấy [ở đây](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59).
Copy link
Collaborator

Choose a reason for hiding this comment

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

Tất cả các thuộc tính không có đơn vị có thể được tìm

-> Danh sách tất cả các thuộc tính không ...


### suppressHydrationWarning {#suppresshydrationwarning}

If you use server-side React rendering, normally there is a warning when the server and the client render different content. However, in some rare cases, it is very hard or impossible to guarantee an exact match. For example, timestamps are expected to differ on the server and on the client.
Nếu bạn sử dụng server-side rendering, thông thường sẽ có một cảnh báo khi nội dung được render trên server khác với client. Tuy nhiên, trong một vài trường hợp, rất khó để đảm báo server và client trùng khớp với nhau vd như render timestamp.
Copy link
Collaborator

Choose a reason for hiding this comment

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

vd như render timestamp.

-> ví dụ, timestamps trên máy chủ khác với ... Nếu bạn muốn dùng từ viết tắt như ví dụ = vd. Bạn có thể viết lần đầu: Ví dụ( viết tắt là vd) để mọi người có thể dễ theo dõi hơn


If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. You can read more about hydration in the [`ReactDOM.hydrate()` documentation](/docs/react-dom.html#hydrate).
Bằng cách đặt `suppressHydrationWarning` `true`, React sẽ không cảnh báo khi nội dung của client và server không khớp nhau. Tuy nhiên `suppressHydrationWarning` chỉ được áp dụng cho một lớp component và chỉ nên sử dụng trong trường hợp bất khả kháng, không nên lạm dụng nó. Xem thêm về Hydration tại [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate).
Copy link
Collaborator

Choose a reason for hiding this comment

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

Đoạn này bạn dịch chưa khớp với bản gốc lắm, bạn có thể dịch lại giúp mình phần này không


### value {#value}

The `value` attribute is supported by `<input>` and `<textarea>` components. You can use it to set the value of the component. This is useful for building controlled components. `defaultValue` is the uncontrolled equivalent, which sets the value of the component when it is first mounted.
Thuộc tính `value` được dùng cho `<input>` `<textarea>`. Bạn có thể dùng `value` để tạo nên Controlled components. Dùng `defaultValue` nếu muốn Uncontrolled components.
Copy link
Collaborator

Choose a reason for hiding this comment

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

Đoạn này bạn dịch chưa khớp với bản gốc lắm, bạn có thể dịch lại giúp mình phần này không

@cuongtran8
Copy link
Collaborator

Hi @cuongtran8 , Can you help us review this PR? Many thanks.

yes sure, I try my best :D

@hweeTan
Copy link
Contributor Author

hweeTan commented Jun 19, 2019

Hi @cuongtran8 , Can you help us review this PR? Many thanks.

yes sure, I try my best :D

Chào @cuongtran8
Mình vừa mới chỉnh lại mấy chỗ bạn review, xem lại giúp mình nha :D


### 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.
Thuộc tính `checked` được hỗ trợ bởi các component `<input>` với kiểu `checkbox` hoặc `radio`. Bạn có thể dùng nó để thiết lập cho component có được checked hay chưa. Điều này hữu ích khi xây dựng những component kiểm soát, xem mục Component Kiểm Soát để biết thêm. `defaultChecked` được dùng để đặt giá trị ban đầu của input, được dùng để tạo những Component Không Kiểm Soát.
Copy link
Collaborator

@cuongtran8 cuongtran8 Jun 21, 2019

Choose a reason for hiding this comment

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

xem mục Component Kiểm Soát để biết thêm.

phần này không có trong nguyên bản

defaultChecked is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted.

defaultChecked là giá trị không kiểm soát, nó sẽ quyết định component có được chọn hay không khi nó được mount lần đầu tiên.


### 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` tương đương với `innerHTML` trong DOM. Nhìn chung, việc thay đổi DOM từ Javascript nguy hiểm do mình có thể vô tình để người dùng bị tấn công bởi [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting). Vì vậy, React có thể tạo HTML trực tiếp, nhưng bạn phải sử dụng `dangerouslySetInnerHTML` và truyền một object với key là `_html` để nhăc bạn nhớ rằng điều này không an toàn. Ví dụ:
Copy link
Collaborator

Choose a reason for hiding this comment

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

việc thay đổi DOM từ Javascript nguy hiểm do mình có thể vô tình để người dùng bị tấn công bởi

việc thay đổi DOM từ Javascript khá rủi ro do nó có thể vô tình để lộ người dùng


### onChange {#onchange}

The `onChange` event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to handle user input in real time.
Sự kiện `onChange` hoạt động đúng như tên gọi của nó: khi một giá trị của trường mẫu bị thay đổi, sự kiện này được phát ra. Chúng tôi cố tình không sử dụng hành vi của trình duyệt bởi vì `onChange` được hiểu sai co hành vi của nó và React dựa vào sự kiện này để xử lý đầu vào của người dùng trong thời gian thực.
Copy link
Collaborator

Choose a reason for hiding this comment

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

hiểu sai co

hiểu sai bởi chính


### 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.
Thuộc tính `selected` được sử dụng trong `<option>` để đánh dấu option nào được chọn trong một `<select>` cho những Component Kiểm Soát.
Copy link
Collaborator

Choose a reason for hiding this comment

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

cho những Component Kiểm Soát.

điều này hữu ích khi tạo ra các component kiểm soát

>
>Some examples in the documentation use `style` for convenience, but **using the `style` attribute as the primary means of styling elements is generally not recommended.** In most cases, [`className`](#classname) should be used to reference classes defined in an external CSS stylesheet. `style` is most often used in React applications to add dynamically-computed styles at render time. See also [FAQ: Styling and CSS](/docs/faq-styling.html).
>Một vài ví dụ trong tài liệu này sử dụng `style` cho tiện, thực tế **sử dụng thuộc tính `style` tại chỗ không được khuyến khích .** Trong đa số các trường hợp, [`className`](#classname) nên được dùng cùng với một file CSS rời để style. Thuộc tính `style` thường được dùng trong React để style động ví dụ như người dùng thay đổi màu hoặc font-size bằng một input. Xem thêm [FAQ: Styling and CSS](/docs/faq-styling.html).
Copy link
Collaborator

Choose a reason for hiding this comment

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

style tại chỗ

style trực tiếp

để style động

để trỏ tới những class được định nghiã ở stylesheet css bên ngoài.

ví dụ như người dùng thay đổi màu hoặc font-size bằng một input.

đoạn này nguyên bản không có


The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes. For example:
Thuộc tính `style` nhận vào một object với các thuộc tính CSS ở dạng camelCase thay vì một chuỗi CSS. Nó sẽ nhất quán với key của object trong Javascript, hiệu quả hơn và đề phòng những lỗ hỗng bảo mật XSS. Ví dụ:
Copy link
Collaborator

Choose a reason for hiding this comment

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

key của object trong Javascript

thuộc tính style� của Javascript trên DOM


Pointer events are not yet supported in every browser (at the time of writing this article, supported browsers include: Chrome, Firefox, Edge, and Internet Explorer). React deliberately does not polyfill support for other browsers because a standard-conform polyfill would significantly increase the bundle size of `react-dom`.
Pointer events chưa được hỗ trợ trong tất cả trình duyệt (tại thời điểm viết bài này, những trình duyệt được hỗ trợ: Chrome, Firefox, Edge, and Internet Explorer)). React không cố để polyfill cho những trình duyệt khác vì nó sẽ làm `react-dom` anng85 hơn rất nhiều.
Copy link
Collaborator

Choose a reason for hiding this comment

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

vì nó sẽ làm

vì nó sẽ làm tăng dung lượng


```
onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
```

The `onPointerEnter` and `onPointerLeave` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
Event `onPointerEnter` `onPointerLeave` lan ra từ element được rời đi và không có capture.
Copy link
Collaborator

Choose a reason for hiding this comment

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

Event onPointerEnteronPointerLeave lan ra từ element được rời đi và không có capture.

đoạn này bị dịch thiếu, bạn dịch thêm giúp mình được không


```
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
```

The `onMouseEnter` and `onMouseLeave` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
Event `onMouseEnter` `onMouseLeave` lan ra từ element được rời đi và không có capture.
Copy link
Collaborator

Choose a reason for hiding this comment

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

đoạn này bị dịch thiếu, bạn dịch thêm giúp mình được không


```
onChange onInput onInvalid onSubmit
```

For more information about the onChange event, see [Forms](/docs/forms.html).
Xem thêm thông tin về Form Event ở [Forms](/docs/forms.html).
Copy link
Collaborator

Choose a reason for hiding this comment

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

-> Xem thêm thông tin về onChange event


The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append `Capture` to the event name; for example, instead of using `onClick`, you would use `onClickCapture` to handle the click event in the capture phase.
Các hàm xử lý event được thực thi trong lúc event bubble lên. Nếu muốn gán hàm xử lý vào lúc capture xuống của event, thêm hậu tố Capture vào sau tên event, ví dụ `onClickCapture`.
Copy link
Collaborator

Choose a reason for hiding this comment

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

Các hàm xử lý event được thực thi trong lúc event bubble lên.

-> Các hàm xử lý event được thực thi �bởi event theo kiểu từ dưới lên. Để đăng kí cho hàm sử lí sự kiện theo kiểu từ trên xuống, thêm Capture vào tên của sự kiện.

(Note: thiệt sự dịch cái đoạn này mình không chắc lắm, mình hiểu buble với capture nhưng dịch ra thì củ chuối quá)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nếu không chắc thì thôi mình tạm để vầy nha.

@cuongtran8
Copy link
Collaborator

Hi @cuongtran8 , Can you help us review this PR? Many thanks.

yes sure, I try my best :D

Chào @cuongtran8
Mình vừa mới chỉnh lại mấy chỗ bạn review, xem lại giúp mình nha :D

Hi,

Cảm ơn bạn nhiều, hôm nay mình mới có thời gian coi tiếp phần bạn dịch, còn một vài chỗ nhỏ cần chỉnh sửa nhưng đã khá hoàn chỉnh rồi. Cảm ơn bạn nhiều.

@hweeTan
Copy link
Contributor Author

hweeTan commented Jun 26, 2019

Hi @cuongtran8 , Can you help us review this PR? Many thanks.

yes sure, I try my best :D

Chào @cuongtran8
Mình vừa mới chỉnh lại mấy chỗ bạn review, xem lại giúp mình nha :D

Hi,

Cảm ơn bạn nhiều, hôm nay mình mới có thời gian coi tiếp phần bạn dịch, còn một vài chỗ nhỏ cần chỉnh sửa nhưng đã khá hoàn chỉnh rồi. Cảm ơn bạn nhiều.

Mình vừa chỉnh sửa những chỗ còn lại rồi nha. Do lần �đầu tham gia nên chưa quen lắm. Sau này chắc đỡ hơn :D

@cuongtran8
Copy link
Collaborator

cảm ơn bạn nhiều, :D lần đầu dịch vậy là quá tốt rồi.

@cuongtran8 cuongtran8 merged commit b3f34a8 into reactjs:master Jun 30, 2019
@tesseralis tesseralis mentioned this pull request Jul 24, 2019
95 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants