From 5358baec646bf99e39514af224c105aa69cb4468 Mon Sep 17 00:00:00 2001 From: Huy Tran Date: Tue, 4 Jun 2019 19:57:48 +0700 Subject: [PATCH 1/4] translate DOM Elements page --- content/docs/reference-dom-elements.md | 68 ++++++++++++++------------ 1 file changed, 36 insertions(+), 32 deletions(-) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 52e780b96..fa4ce618f 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -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. -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 và 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-*` và `data-*` phải được viết chữ thường. Ví dụ `aria-label` vẫn là `aria-label`. -## Differences In Attributes {#differences-in-attributes} +## Sự khác biệt trong các thuộc tính {#differences-in-attributes} -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: ### checked {#checked} -The `checked` attribute is supported by `` 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 `` có type là `checkbox` và `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. ### className {#classname} -To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `
`, ``, 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. -If you use React with Web Components (which is uncommon), use the `class` attribute instead. +Nếu bạn sử dụng Web Components (trường hợp không phổ biến), thì vẫn dùng `class`. ### 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 vô tình bị tấn công bởi [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting). Vì vậy, trong React, bạn phải sử dụng `dangerouslySetInnerHTML` và truyền một object với key là `_html` để đề phòng. Ví dụ: ```js function createMarkup() { @@ -48,23 +48,25 @@ function MyComponent() { ### htmlFor {#htmlfor} -Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. +Do `for` là một từ khoá trong Javascript, React dùng `htmlFor`. ### 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ó, được phát ra khi giá trị của `` thay đổi. React dựa vào sự kiện này để xử lý đầu vào từ người dùng ở thời gian thực. ### selected {#selected} The `selected` attribute is supported by `