You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/reference-dom-elements.md
+34-34Lines changed: 34 additions & 34 deletions
Original file line number
Diff line number
Diff line change
@@ -14,27 +14,27 @@ redirect_from:
14
14
- "tips/dangerously-set-inner-html.html"
15
15
---
16
16
17
-
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.
17
+
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 đã 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.
18
18
19
-
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`.
19
+
Trong React, tất cả các thuộc tính của DOM (bao gồm xử lí sự kiện) 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`.
20
20
21
-
## Differences In Attributes {#differences-in-attributes}
21
+
## Sự khác biệt trong các thuộc tính {#differences-in-attributes}
22
22
23
-
There are a number of attributes that work differently between React and HTML:
23
+
Có một vài thuộc tính hoạt động khác biệt giữa React và HTML:
24
24
25
25
### checked {#checked}
26
26
27
-
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.
27
+
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. `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.
28
28
29
29
### className {#classname}
30
30
31
-
To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `<div>`, `<a>`, and others.
31
+
Để đặ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ư `div`, `a` và những thuộc tính khác.
32
32
33
-
If you use React with Web Components (which is uncommon), use the `class` attribute instead.
33
+
Nếu bạn sử dụng React với Web Components (trường hợp không phổ biến), thì vẫn dùng `class`.
`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:
37
+
`dangerouslySetInnerHTML`tương đương với `innerHTML`trong DOM. Nhìn chung, việc thay đổi DOM từ Javascript khá rủi ro do nó có thể vô tình để lộ người dùng [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ụ:
38
38
39
39
```js
40
40
functioncreateMarkup() {
@@ -48,23 +48,23 @@ function MyComponent() {
48
48
49
49
### htmlFor {#htmlfor}
50
50
51
-
Since`for`is a reserved word in JavaScript, React elements use `htmlFor` instead.
51
+
Do`for`là một từ khoá trong Javascript, React dùng `htmlFor`.
52
52
53
53
### onChange {#onchange}
54
54
55
-
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.
55
+
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 bởi chính 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.
56
56
57
57
### selected {#selected}
58
58
59
-
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.
59
+
Thuộc tính `selected`được sử dụng trong`<option>`để đánh dấu option nào được chọn trong một `<select>`. Điều này hữu ích khi tạo ra các Component Kiểm Soát.
60
60
61
61
### style {#style}
62
62
63
-
>Note
63
+
>Lưu ý
64
64
>
65
-
>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).
65
+
>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`trực tiếp 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 để trỏ tới những class được định nghiã ở stylesheet css bên ngoài. Xem thêm[FAQ: Styling and CSS](/docs/faq-styling.html).
66
66
67
-
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:
67
+
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 thuộc tính `style`của Javascript trên DOM, hiệu quả hơn và đề phòng những lỗ hỗng bảo mật XSS. Ví dụ:
68
68
69
69
```js
70
70
constdivStyle= {
@@ -77,22 +77,22 @@ function HelloWorldComponent() {
77
77
}
78
78
```
79
79
80
-
Note that styles are not autoprefixed. To support older browsers, you need to supply corresponding style properties:
80
+
Nhớ rằng styles không tự động thêm tiền tố. Để tương thích với các trình duyệt nên bạn phải tự thêm tiền tố vào. Ví dụ:
81
81
82
82
```js
83
83
constdivStyle= {
84
-
WebkitTransition:'all', //note the capital 'W' here
85
-
msTransition:'all'// 'ms' is the only lowercase vendor prefix
84
+
WebkitTransition:'all', //nhớ là chữ 'W' được viết hoa
85
+
msTransition:'all'// 'ms' là tiền tố duy nhất được viết thường
86
86
};
87
87
88
88
functionComponentWithTransition() {
89
89
return<div style={divStyle}>This should work cross-browser</div>;
90
90
}
91
91
```
92
92
93
-
Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g.`node.style.backgroundImage`). Vendor prefixes [other than `ms`](https://www.andismith.com/blogs/2012/02/modernizr-prefixed/)should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
93
+
Các từ khoá style được viết theo dạng camelCase để đồng nhất với việc truy cập các thuộc tính trên DOM từ Javascript, ví dụ`node.style.backgroundImage`. Các tiền tố [ngoài `ms`](https://www.andismith.com/blogs/2012/02/modernizr-prefixed/)phải được bắt đầu bằng một chữ hoa ví dụ như `WebkitTransition`.
94
94
95
-
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:
95
+
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 ngoài 'px', hãy thêm đơn vị mong muốn dưới dạng chuỗi, ví dụ:
96
96
97
97
```js
98
98
// Result style: '10px'
@@ -106,37 +106,37 @@ React will automatically append a "px" suffix to certain numeric inline style pr
106
106
</div>
107
107
```
108
108
109
-
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).
109
+
Không phải thuộc tính nào cũng được thêm hậu tố "px" vào sau. Các thuộc tính không có đơn vị sẽ được giữ nguyên, ví dụ như `zoom`, `order`, `flex`. Danh sách 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).
Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually.
113
+
Một component có component con được đánh dấu là `contentEditable` sẽ không hoạt động và sẽ được cảnh báo. Thuộc tính này sẽ bỏ đi cảnh báo, nhưng các bạn không cần thiết phải dùng nó trừ khi bạn đang xây dựng một thư viện làm việc trực tiếp với `contentEditable` như [Draft.js](https://facebook.github.io/draft-js/).
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.
117
+
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 ví dụ như render timestamp.
118
118
119
-
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).
119
+
Nếu bạn để`suppressHydrationWarning`là`true`, React sẽ không cảnh báo về những sự không trùng khớp trong những thuộc tính và nội dung của element đó. Nó chỉ hoạt động một cấp, và được dự định sử dụng như một lối thoát. Đừng lạm dụng nó. Bạn có thể xem thêm về hydration tại [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate).
120
120
121
121
### value {#value}
122
122
123
-
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.
123
+
Thuộc tính `value`được hỗ trợ bởi những component `<input>`và`<textarea>`. Ban có thể sử dụng nó để đặt giá trị của component. Điều này là cần thiết để tạo Component Kiểm Soát. `defaultValue`là thuộc tính tương đương trong Component Không Kiểm Soát, nó đặt giá trị cho Component khi nó được mount lần đầu tiên.
124
124
125
-
## All Supported HTML Attributes {#all-supported-html-attributes}
125
+
## Tất cả thuộc tính HTML được hỗ trợ {#all-supported-html-attributes}
126
126
127
-
As of React 16, any standard [or custom](/blog/2017/09/08/dom-attributes-in-react-16.html) DOM attributes are fully supported.
127
+
Trong React 16, [tất cả](/blog/2017/09/08/dom-attributes-in-react-16.html)thuộc tính DOM đều được hỗ trợ.
128
128
129
-
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the `camelCase`convention just like the DOM APIs:
129
+
React luôn cung cấp một API với trọng tâm là javascript cho DOM. Bời vì những React component thường nhận những props được tuỳ chỉnh hoặc có liên quan tới DOM, React sử dụng quy ước `camelCase`như là các DOM APIs. Ví dụ như:
130
130
131
131
```js
132
-
<div tabIndex="-1"/>//Just like node.tabIndex DOM API
133
-
<div className="Button"/>//Just like node.className DOM API
134
-
<input readOnly={true} />//Just like node.readOnly DOM API
132
+
<div tabIndex="-1"/>//tương tự node.tabIndex DOM API
133
+
<div className="Button"/>//tương tự node.className DOM API
134
+
<input readOnly={true} />//tương tự node.readOnly DOM API
135
135
```
136
136
137
-
These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.
137
+
Những thuộc tính này hoạt động tương tự với thuộc tính HTML, với những ngoại lệ liệt kê ở trên.
138
138
139
-
Some of the DOM attributes supported by React include:
139
+
Một vài thuộc tính DOM được React hỗ trợ như:
140
140
141
141
```
142
142
accept acceptCharset accessKey action allowFullScreen alt async autoComplete
0 commit comments