From 05dcbfe24be6431d8f05027fbd0dcfacd65af4d5 Mon Sep 17 00:00:00 2001
From: Shuai Chen <wasd2144@hotmail.com>
Date: Sun, 24 Feb 2019 22:20:49 +0800
Subject: [PATCH 1/8] doc: translated fragments document

---
 content/docs/fragments.md | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index 04de0463bc..af8e388227 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -4,7 +4,7 @@ title: Fragments
 permalink: docs/fragments.html
 ---
 
-A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
+React 中的一个常见模式是组件返回多个元素。 Fragments 允许您将子列表分组，而无需向 DOM 添加额外节点.
 
 ```js
 render() {
@@ -18,11 +18,11 @@ render() {
 }
 ```
 
-There is also a new [short syntax](#short-syntax) for declaring them, but it isn't supported by all popular tools yet.
+还有一种新的 [短语法](#short-syntax) 用于声明它们，但尚未得到所有流行工具的支持。
 
-## Motivation {#motivation}
+## 动机 {#motivation}
 
-A common pattern is for a component to return a list of children. Take this example React snippet:
+一种常见的模式是组件返回子项列表。 以此示例 React 片段为例：
 
 ```jsx
 class Table extends React.Component {
@@ -38,7 +38,7 @@ class Table extends React.Component {
 }
 ```
 
-`<Columns />` would need to return multiple `<td>` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of `<Columns />`, then the resulting HTML will be invalid.
+`<Columns />` 需要返回多个 `<td>` 元素才能使呈现的 HTML 有效。 如果在 `<Columns />` 的 `render（）` 中使用了父 div，则生成的 HTML 将无效。
 
 ```jsx
 class Columns extends React.Component {
@@ -53,7 +53,7 @@ class Columns extends React.Component {
 }
 ```
 
-results in a `<Table />` output of:
+得到一个 `<Table />` 输出：
 
 ```jsx
 <table>
@@ -66,9 +66,9 @@ results in a `<Table />` output of:
 </table>
 ```
 
-Fragments solve this problem.
+Fragments 解决了这个问题。
 
-## Usage {#usage}
+## 使用 {#usage}
 
 ```jsx{4,7}
 class Columns extends React.Component {
@@ -83,7 +83,7 @@ class Columns extends React.Component {
 }
 ```
 
-which results in a correct `<Table />` output of:
+这样可以正确的输出 `<Table />` :
 
 ```jsx
 <table>
@@ -94,9 +94,9 @@ which results in a correct `<Table />` output of:
 </table>
 ```
 
-### Short Syntax {#short-syntax}
+### 短语法 {#short-syntax}
 
-There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:
+您可以使用一种新的，更短的语法来声明 Fragments。 它看起来像空标签：
 
 ```jsx{4,7}
 class Columns extends React.Component {
@@ -111,20 +111,20 @@ class Columns extends React.Component {
 }
 ```
 
-You can use `<></>` the same way you'd use any other element except that it doesn't support keys or attributes.
+你可以像使用任何其他元素一样使用 `<> </>`，除了它不支持 key 或属性。
 
-Note that **[many tools don't support it yet](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** so you might want to explicitly write `<React.Fragment>` until the tooling catches up.
+请注意 **[许多工具尚不支持](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** ，所以你可能要使用`<React.Fragment>` 直到工具可以支持。
 
-### Keyed Fragments {#keyed-fragments}
+### 带 key 的 Fragments {#keyed-fragments}
 
-Fragments declared with the explicit `<React.Fragment>` syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list:
+使用显式 `<React.Fragment>` 语法声明的片段可能具有 key。 一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表：
 
 ```jsx
 function Glossary(props) {
   return (
     <dl>
       {props.items.map(item => (
-        // Without the `key`, React will fire a key warning
+        // 没有`key`，React 会发出一个关键警告
         <React.Fragment key={item.id}>
           <dt>{item.term}</dt>
           <dd>{item.description}</dd>
@@ -135,8 +135,8 @@ function Glossary(props) {
 }
 ```
 
-`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers.
+`key` 是唯一可以传递给 `Fragment` 的属性。 未来我们可能会添加对其他属性的支持，例如事件。
 
-### Live Demo {#live-demo}
+### 在线 Demo {#live-demo}
 
-You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
+您可以使用[CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)此尝试新的 JSX Fragment 语法 .

From 7ab68b8da2f1d48454b87bbf4ec4a69dadb24237 Mon Sep 17 00:00:00 2001
From: Shuai Chen <wasd2144@hotmail.com>
Date: Sun, 24 Feb 2019 23:23:30 +0800
Subject: [PATCH 2/8] =?UTF-8?q?doc:=20use=20=E4=BD=A0=20replace=20?=
 =?UTF-8?q?=E6=82=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/docs/fragments.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index af8e388227..806655e66c 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -4,7 +4,7 @@ title: Fragments
 permalink: docs/fragments.html
 ---
 
-React 中的一个常见模式是组件返回多个元素。 Fragments 允许您将子列表分组，而无需向 DOM 添加额外节点.
+React 中的一个常见模式是组件返回多个元素。 Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点.
 
 ```js
 render() {
@@ -96,7 +96,7 @@ class Columns extends React.Component {
 
 ### 短语法 {#short-syntax}
 
-您可以使用一种新的，更短的语法来声明 Fragments。 它看起来像空标签：
+你可以使用一种新的，更短的语法来声明 Fragments。 它看起来像空标签：
 
 ```jsx{4,7}
 class Columns extends React.Component {
@@ -139,4 +139,4 @@ function Glossary(props) {
 
 ### 在线 Demo {#live-demo}
 
-您可以使用[CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)此尝试新的 JSX Fragment 语法 .
+你可以使用[CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)此尝试新的 JSX Fragment 语法 .

From d913ad67e93572fa6df49778ff3509bc5cefee91 Mon Sep 17 00:00:00 2001
From: chen shuai <qixian.cs@outlook.com>
Date: Mon, 25 Mar 2019 18:48:25 +0800
Subject: [PATCH 3/8] fix review error

---
 content/docs/fragments.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index 806655e66c..572b989811 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -18,7 +18,7 @@ render() {
 }
 ```
 
-还有一种新的 [短语法](#short-syntax) 用于声明它们，但尚未得到所有流行工具的支持。
+还有一种新的 [短语法](#short-syntax) 可用于声明它们，但尚未得到所有流行工具的支持。
 
 ## 动机 {#motivation}
 
@@ -38,7 +38,7 @@ class Table extends React.Component {
 }
 ```
 
-`<Columns />` 需要返回多个 `<td>` 元素才能使呈现的 HTML 有效。 如果在 `<Columns />` 的 `render（）` 中使用了父 div，则生成的 HTML 将无效。
+`<Columns />` 需要返回多个 `<td>` 元素才能使呈现的 HTML 有效。 如果在 `<Columns />` 的 `render()` 中使用了父 div，则生成的 HTML 将无效。
 
 ```jsx
 class Columns extends React.Component {
@@ -113,7 +113,7 @@ class Columns extends React.Component {
 
 你可以像使用任何其他元素一样使用 `<> </>`，除了它不支持 key 或属性。
 
-请注意 **[许多工具尚不支持](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** ，所以你可能要使用`<React.Fragment>` 直到工具可以支持。
+请注意 **[许多工具尚不支持](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** ，所以你可能要明确使用`<React.Fragment>` 直到工具可以支持。
 
 ### 带 key 的 Fragments {#keyed-fragments}
 
@@ -139,4 +139,4 @@ function Glossary(props) {
 
 ### 在线 Demo {#live-demo}
 
-你可以使用[CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)此尝试新的 JSX Fragment 语法 .
+你可以使用[CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)尝试这个新的 JSX Fragment 语法 .

From 4c2996e1bb55c3b31727d4adb6ed5ef49d8182c3 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Wed, 27 Mar 2019 18:31:12 +0800
Subject: [PATCH 4/8] Update fragments.md

---
 content/docs/fragments.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index 572b989811..9547e5494a 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -4,7 +4,7 @@ title: Fragments
 permalink: docs/fragments.html
 ---
 
-React 中的一个常见模式是组件返回多个元素。 Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点.
+React 中的一个常见场景是组件会返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
 
 ```js
 render() {
@@ -18,11 +18,11 @@ render() {
 }
 ```
 
-还有一种新的 [短语法](#short-syntax) 可用于声明它们，但尚未得到所有流行工具的支持。
+还有一种新的[短语法](#short-syntax)可用于声明它们，但尚未得到所有流行工具的支持。
 
 ## 动机 {#motivation}
 
-一种常见的模式是组件返回子项列表。 以此示例 React 片段为例：
+一种常见的模式是组件返回子项列表。以此 React 示例片段为例：
 
 ```jsx
 class Table extends React.Component {
@@ -38,7 +38,7 @@ class Table extends React.Component {
 }
 ```
 
-`<Columns />` 需要返回多个 `<td>` 元素才能使呈现的 HTML 有效。 如果在 `<Columns />` 的 `render()` 中使用了父 div，则生成的 HTML 将无效。
+`<Columns />` 需要返回多个 `<td>` 元素才能使呈现的 HTML 有效。如果在 `<Columns />` 的 `render()` 中使用了父 div，则生成的 HTML 将无效。
 
 ```jsx
 class Columns extends React.Component {
@@ -68,7 +68,7 @@ class Columns extends React.Component {
 
 Fragments 解决了这个问题。
 
-## 使用 {#usage}
+## 用法 {#usage}
 
 ```jsx{4,7}
 class Columns extends React.Component {
@@ -83,7 +83,7 @@ class Columns extends React.Component {
 }
 ```
 
-这样可以正确的输出 `<Table />` :
+这样可以正确的输出 `<Table />`：
 
 ```jsx
 <table>
@@ -96,7 +96,7 @@ class Columns extends React.Component {
 
 ### 短语法 {#short-syntax}
 
-你可以使用一种新的，更短的语法来声明 Fragments。 它看起来像空标签：
+你可以使用一种新的，且更简短的语法来声明 Fragments。它看起来像空标签：
 
 ```jsx{4,7}
 class Columns extends React.Component {
@@ -113,11 +113,11 @@ class Columns extends React.Component {
 
 你可以像使用任何其他元素一样使用 `<> </>`，除了它不支持 key 或属性。
 
-请注意 **[许多工具尚不支持](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** ，所以你可能要明确使用`<React.Fragment>` 直到工具可以支持。
+请注意 **[目前许多工具尚不支持](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** ，所以你可能要使用 `<React.Fragment>` 直到工具支持为止。
 
 ### 带 key 的 Fragments {#keyed-fragments}
 
-使用显式 `<React.Fragment>` 语法声明的片段可能具有 key。 一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表：
+使用显式 `<React.Fragment>` 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表：
 
 ```jsx
 function Glossary(props) {
@@ -135,8 +135,8 @@ function Glossary(props) {
 }
 ```
 
-`key` 是唯一可以传递给 `Fragment` 的属性。 未来我们可能会添加对其他属性的支持，例如事件。
+`key` 是唯一可以传递给 `Fragment` 的属性。未来我们可能会添加对其他属性的支持，例如事件。
 
 ### 在线 Demo {#live-demo}
 
-你可以使用[CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)尝试这个新的 JSX Fragment 语法 .
+你可以在 [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000) 中尝试这个新的 JSX Fragment 语法。

From 9cb5ec5ffb4f0d03a8bd96ecab3233360842d78b Mon Sep 17 00:00:00 2001
From: Joe Jiang <hijiangtao@gmail.com>
Date: Wed, 27 Mar 2019 21:26:44 +0800
Subject: [PATCH 5/8] Update content/docs/fragments.md

---
 content/docs/fragments.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index 9547e5494a..de074f815f 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -4,7 +4,7 @@ title: Fragments
 permalink: docs/fragments.html
 ---
 
-React 中的一个常见场景是组件会返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
+React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
 
 ```js
 render() {

From bcae27a51bf91f85f0fd31d5756e89997f890023 Mon Sep 17 00:00:00 2001
From: Joe Jiang <hijiangtao@gmail.com>
Date: Wed, 27 Mar 2019 21:26:52 +0800
Subject: [PATCH 6/8] Update content/docs/fragments.md

---
 content/docs/fragments.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index de074f815f..f6cba56093 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -113,7 +113,7 @@ class Columns extends React.Component {
 
 你可以像使用任何其他元素一样使用 `<> </>`，除了它不支持 key 或属性。
 
-请注意 **[目前许多工具尚不支持](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** ，所以你可能要使用 `<React.Fragment>` 直到工具支持为止。
+请注意 **[目前许多工具尚不支持](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** ，所以直到工具支持之前，你可能要显式的使用 `<React.Fragment>`。
 
 ### 带 key 的 Fragments {#keyed-fragments}
 

From dc91bf4a9bd716a21fc2cf0309419ac1dff5d602 Mon Sep 17 00:00:00 2001
From: Joe Jiang <hijiangtao@gmail.com>
Date: Wed, 27 Mar 2019 21:29:04 +0800
Subject: [PATCH 7/8] Update content/docs/fragments.md

---
 content/docs/fragments.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index f6cba56093..104abb39a5 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -22,7 +22,7 @@ render() {
 
 ## 动机 {#motivation}
 
-一种常见的模式是组件返回子项列表。以此 React 示例片段为例：
+一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例：
 
 ```jsx
 class Table extends React.Component {

From 571f33556f5d2c1e16e56e85dcbd6b0f6204036e Mon Sep 17 00:00:00 2001
From: Joe Jiang <hijiangtao@gmail.com>
Date: Wed, 27 Mar 2019 21:29:12 +0800
Subject: [PATCH 8/8] Update content/docs/fragments.md

---
 content/docs/fragments.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index 104abb39a5..9924ce3a3f 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -38,7 +38,7 @@ class Table extends React.Component {
 }
 ```
 
-`<Columns />` 需要返回多个 `<td>` 元素才能使呈现的 HTML 有效。如果在 `<Columns />` 的 `render()` 中使用了父 div，则生成的 HTML 将无效。
+`<Columns />` 需要返回多个 `<td>` 元素以使渲染的 HTML 有效。如果在 `<Columns />` 的 `render()` 中使用了父 div，则生成的 HTML 将无效。
 
 ```jsx
 class Columns extends React.Component {