From 93bdeb008667733bd7f92186e7efbf6da01300f9 Mon Sep 17 00:00:00 2001 From: Bocong Zhao Date: Wed, 13 Feb 2019 16:47:32 -0500 Subject: [PATCH 1/7] Added Translation to DOM Elements --- content/docs/reference-dom-elements.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 1668709681..546e3a4e7c 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -1,6 +1,6 @@ --- id: dom-elements -title: DOM Elements +title: DOM 元素 layout: docs category: Reference permalink: docs/dom-elements.html @@ -14,17 +14,15 @@ 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 实现了一套独立于浏览器的DOM系统，兼顾了性能和跨浏览器的兼容性。我们借此机会完善了浏览器DOM实现的一些边缘情况。 -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`. +在React中，所有的DOM特性和属性（包括事件处理）都应该是驼峰拼写法命名。例如，与HTML中的`tabindex`属性对应的React的属性是`tabIndex`。例外的情况是`aria-*`和`data-*`属性，一律使用小写字母命名。比如, 你依然可以用 `aria-label` 作为 `aria-label`。 -## Differences In Attributes {#differences-in-attributes} - -There are a number of attributes that work differently between React and HTML: +## 属性的不同 {#differences-in-attributes} +在React和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. +`checked`属性是由type为`checkbox`或`radio`的``组件所支持的。你可以用它来设定组件是否被选中。这对于构建控制组件很有用。与之相对的`defaultChecked`是非控制组件的属性，用来设定组件首次加载时是否被选中。 ### className {#classname} From a2f9223f43f8b1f9fb33a1ec36a50a673b577796 Mon Sep 17 00:00:00 2001 From: Bocong Zhao Date: Sat, 16 Feb 2019 22:29:53 -0500 Subject: [PATCH 2/7] Finished translation of DOM Elements --- content/docs/reference-dom-elements.md | 63 ++++++++++++-------------- 1 file changed, 28 insertions(+), 35 deletions(-) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 546e3a4e7c..b236daa5a6 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -14,25 +14,23 @@ 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`。 +在 React 中，所有的 DOM 特性和属性（包括事件处理）都应该是驼峰拼写法命名。例如，与 HTML 中的 `tabindex` 属性对应的 React 的属性是 `tabIndex` 。例外的情况是 `aria-*` 和 `data-*` 属性，一律使用小写字母命名。比如, 你依然可以用 `aria-label` 作为 `aria-label`。 ## 属性的不同 {#differences-in-attributes} -在React和HTML之间有很多属性的作用是不同的。 +在 React 和 HTML 之间有很多属性的作用是不同的。 ### checked {#checked} -`checked`属性是由type为`checkbox`或`radio`的``组件所支持的。你可以用它来设定组件是否被选中。这对于构建控制组件很有用。与之相对的`defaultChecked`是非控制组件的属性，用来设定组件首次加载时是否被选中。 +`checked` 属性是由 type 为 `checkbox` 或 `radio` 的 `` 组件所支持的。你可以用它来设定组件是否被选中。这对于构建控制组件很有用。与之相对的 `defaultChecked` 是非控制组件的属性，用来设定组件首次装载时是否被选中。 ### className {#classname} +用 `className` 属性来指定一个 CSS class，这个特性适用于所有的常规 DOM 节点和 SVG 元素，比如 `
`，`` 和其它的标签。 -To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `
`, ``, and others. - -If you use React with Web Components (which is uncommon), use the `class` attribute instead. +如果你在 React 中使用 Web 组件（这是一种不常见的使用方式），请使用 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` 是 React 提供给浏览器 DOM 中 `innerHTML` 方法的一种替换方案。通常来讲，使用代码直接设置 HTML 文档内容是存在风险的，因为这样很容易把你的用户信息暴露，且不经意间就会受到[跨站脚本(XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting)攻击。所以，虽然可以直接在 React 中设置 HTML 的内容，但是你要使用 `dangerouslySetInnerHTML` 并且向其传递一个含有 `__html` 为 key 的对象，以此来提醒你这样做是很危险。例如： ```js function createMarkup() { @@ -45,24 +43,20 @@ function MyComponent() { ``` ### htmlFor {#htmlfor} - -Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. +因为 `for` 在 Javascript 中是一个关键字，所以 React 元素使用 `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. +`onChange` 事件的行为就如你所想的：无论一个表单内容何时发生变化，这个事件都会被触发。我们故意不使用浏览器已有的默认行为，就是因为 `onChange` 在浏览器中的行为和名称不相称，而 React 是依靠这个事件实时处理用户输入。 ### selected {#selected} - -The `selected` attribute is supported by `
``` - -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). +尽管不是所有样式属性都会被转化为像素字符串，但某些个样式属性是会保持无单位(例如 `zoom` , `order`, `flex`)。完整的无单位的属性列表在[这里](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59)。 ### suppressContentEditableWarning {#suppresscontenteditablewarning} - -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. +一般来说，当一个拥有子节点的元素被标记为 `contentEditable` 时，React 会发出一个警告，因为这是无效的。这个属性会触发这样的警告信息。不要使用这个属性，除非你要构建一个类似 [Draft.js](https://facebook.github.io/draft-js/) 这样需要手动管理 `contentEditable` 属性的库。 ### 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. +如果你使用服务端 React 渲染，通常来说，当服务端和客户端渲染不同的内容时，就会给出一个警告信息。但是，在一些极少数的情况下，很难甚至于不可能保证内容绝对的一致。例如，在服务端和客户端上，时间戳通常是不一样的。 -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). +如果设置 `suppressHydrationWarning` 为 `true`，React 将不会警告你属性和元素的内容不一致。它只对元素一层深度起作用，并且意指在特殊情况下才使用的。不要过度使用它。你可以在 [`ReactDOM.hydrate()` 文档](/docs/react-dom.html#hydrate) 里读到更多关于 hydration 的信息。 ### value {#value} -The `value` attribute is supported by `` and `