Skip to content

Commit

Permalink
Apply suggestions second times
Browse files Browse the repository at this point in the history
  • Loading branch information
zbc committed Mar 14, 2019
1 parent a6c91cf commit 5c77fd8
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions content/docs/reference-dom-elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ redirect_from:
- "tips/dangerously-set-inner-html.html"
---

React 实现了一套独立于浏览器的 DOM 系统,兼顾了性能和跨浏览器的兼容性。我们借此机会完善了浏览器 DOM 实现的一些边缘情况
React 实现了一套独立于浏览器的 DOM 系统,兼顾了性能和跨浏览器的兼容性。我们借此机会完善了浏览器 DOM 实现的一些特殊情况

在 React 中,所有的 DOM 特性和属性(包括事件处理)都应该是小驼峰命名的方式。例如,与 HTML 中的 `tabindex` 属性对应的 React 的属性是 `tabIndex`。例外的情况是 `aria-*` 以及 `data-*` 属性,一律使用小写字母命名。比如, 你依然可以用 `aria-label` 作为 `aria-label`

Expand All @@ -24,7 +24,7 @@ React 与 HTML 之间有很多属性存在差异:

### checked {#checked}

`<input>` 组件的 type 类型为 `checkbox``radio` 时,组件支持 `checked` 属性。你可以使用它来设置组件是否被选中。这对于构建受控组件很有帮助。而 `defaultChecked` 则是非受控组件的属性,用于设置组件首次挂载时是否被选中。
`<input>` 组件的 type 类型为 `checkbox``radio` 时,组件支持 `checked` 属性。你可以使用它来设置组件是否被选中。这对于构建受控组件(controlled components)很有帮助。而 `defaultChecked` 则是非受控组件的属性,用于设置组件首次挂载时是否被选中。

### className {#classname}

Expand All @@ -34,7 +34,7 @@ React 与 HTML 之间有很多属性存在差异:

### dangerouslySetInnerHTML {#dangerouslysetinnerhtml}

`dangerouslySetInnerHTML` 是 React 为浏览器 DOM 提供 `innerHTML` 的替换方案。通常来讲,使用代码直接设置 HTML 存在风险,因为用户很可能会受到[跨站脚本(XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting)攻击。因此,你可以直接在 React 中设置 HTML,但当你想设置 `dangerouslySetInnerHTML` 时,需要向其传递包含 key 为 `__html` 的对象,以此来警示你。例如:
`dangerouslySetInnerHTML` 是 React 为浏览器 DOM 提供 `innerHTML` 的替换方案。通常来讲,使用代码直接设置 HTML 存在风险,因为很容易无意中使用户暴露于[跨站脚本(XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting)的攻击。因此,你可以直接在 React 中设置 HTML,但当你想设置 `dangerouslySetInnerHTML` 时,需要向其传递包含 key 为 `__html` 的对象,以此来警示你。例如:

```js
function createMarkup() {
Expand Down Expand Up @@ -116,7 +116,7 @@ React 会自动添加 ”px” 后缀到内联样式为数字的属性后。如

如果你使用 React 服务端渲染,通常会在当服务端与客户端渲染不同的内容时发出警告。但是,在一些极少数的情况下,很难甚至于不可能保证内容的一致性。例如,在服务端和客户端上,时间戳通常是不同的。

如果设置 `suppressHydrationWarning``true`,React 将不会警告你属性与元素内容不一致。它只会对元素一级深度有效,并且打算作为应急方案。因此不要过度使用它。你可以在 [`ReactDOM.hydrate()` 文档](/docs/react-dom.html#hydrate) 中了解更多关于 hydration 的信息。
如果设置 `suppressHydrationWarning``true`,React 将不会警告你属性与元素内容不一致。它只会对元素一级深度有效,并且打算作为应急方案。因此不要过度使用它。你可以在 [`ReactDOM.hydrate()` 文档](/docs/react-dom.html#hydrate) 中了解更多关于 hydration 的信息。

### value {#value}

Expand Down

0 comments on commit 5c77fd8

Please sign in to comment.