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
+19-47
Original file line number
Diff line number
Diff line change
@@ -14,34 +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.
18
17
React 實踐了一個具有效能且跨瀏覽器兼容的 DOM system。並在實踐的過程中，優化 DOM 美中不足之處。
19
18
20
-
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`.
There are a number of attributes that work differently between React and HTML:
26
23
有些 attribute 在 React 和 HTML 之間運作的方式略為不同：
27
24
28
25
### checked {#checked}
29
26
30
-
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.
`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:
Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead.
59
-
React element 使用 `htmlFor` 來取代 `for`，因為 `for` 在 JavaScript 是保留字詞。
51
+
React element 使用 `htmlFor` 來替代 `for`，因為 `for` 在 JavaScript 是保留字詞。
60
52
61
53
### onChange {#onchange}
62
54
63
-
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.
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.
>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).
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:
return<div style={divStyle}>This should work cross-browser</div>;
105
90
}
106
91
```
107
92
108
-
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".
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:
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).
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.
132
-
通常，當一個 element 的 children 被標示 `contentEditable` 時會有警示訊息，因為這不會有作用。這個 attribute 會抑制警示訊息。除非你在建立一個 library 像是 [Draft.js](https://facebook.github.io/draft-js/)，不要使用它。
113
+
通常當一個 element 的 children 設置 `contentEditable` 時會有警示訊息，因為這不會有作用。這個 attribute 會抑制警示訊息。除非你在建立一個 library 像是 [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.
137
-
如果你在使用 server-side React rendering 時 server 和 client render 不同時，通常會有一個警示訊息。然而，在一些很少見的案例，很難去保證 server 和 client side 會完全符合。舉例來說，像是 timestamps 就無法保持相同。
117
+
如果你在使用 server-side React rendering 時 server 和 client render 不同時，通常會有一個警示訊息。然而，在一些很少見的案例，很難去保證 server 和 client side 會完全符合。舉例來說，像是 timestamp 就無法保持相同。
138
118
139
-
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).
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.
## All Supported HTML Attributes {#all-supported-html-attributes}
125
+
## 所有 HTML Attributes 皆可使用 {#all-supported-html-attributes}
148
126
149
-
As of React 16, any standard [or custom](/blog/2017/09/08/dom-attributes-in-react-16.html) DOM attributes are fully supported.
150
-
在 React 16 中，任何標準[或是自訂](/blog/2017/09/08/dom-attributes-in-react-16.html) DOM attributes 都可以被使用。
127
+
在 React 16 中，任何標準或是[自訂](/blog/2017/09/08/dom-attributes-in-react-16.html) DOM attributes 都可以使用。
151
128
152
-
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:
153
-
React 對於 DOM 始終提供以 JavaScript 為中心的 API。React 使用像 DOM API 一樣的 `camelCase` 轉換，因為 React components 通常會有自訂prop，也會有跟 DOM 相關的 prop，
129
+
React 對於 DOM 始終提供以 JavaScript 為中心的 API。因為 React component 通常會有自訂 prop，也會有跟 DOM 相關的 prop，React 使用像 DOM API 一樣的 `camelCase` 轉換。
154
130
155
131
```js
156
132
<div tabIndex="-1"/>// 就像 node.tabIndex DOM API
157
133
<div className="Button"/>// 就像 node.className DOM API
158
134
<input readOnly={true} />// 就像 node.readOnly DOM API
159
135
```
160
136
161
-
These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.
162
137
除了上述文件提到的，這些 prop 跟相對應的 HTML attribute 運作方式一樣。
163
138
164
-
Some of the DOM attributes supported by React include:
0 commit comments