From 4c00dcb4967e70a449ff06c1836af54f4281454a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=87=E4=BD=91?= Date: Sat, 14 Sep 2019 22:35:35 +0800 Subject: [PATCH 01/12] Translated Fragements into Traditional Chinese --- content/docs/fragments.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 33619db2f..b714524d0 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其中一種常見的使用情況是在一個component中回傳多個element，Fragements讓你能夠在不用增加額外DOM節點的情況下，重新組合child componenet。 ```js render() { @@ -18,11 +18,12 @@ render() { } ``` -There is also a new [short syntax](#short-syntax) for declaring them. +還有一種更[簡短的語法](#short-syntax)可以用來宣告。 + -## Motivation {#motivation} +## 動機 {#motivation} -A common pattern is for a component to return a list of children. Take this example React snippet: +常見的情況是component回傳一連串的child element，看看這個React的程式碼片段: ```jsx class Table extends React.Component { @@ -38,7 +39,7 @@ class Table extends React.Component { } ``` -`` would need to return multiple `` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of ``, then the resulting HTML will be invalid. +為了使render出來的HTML是有效的，`` 需要回傳多個 `` element 。 但如果將parent div 元素放在 ``中的`render()`區塊，將會使生成的HTML無效。 ```jsx class Columns extends React.Component { @@ -53,7 +54,7 @@ class Columns extends React.Component { } ``` -results in a `` output of: +在 `
` 內的輸出如下: ```jsx
@@ -66,9 +67,9 @@ results in a `
` output of:
``` -Fragments solve this problem. +這個問題交給Fragments解決。 -## Usage {#usage} +## 用法 {#usage} ```jsx{4,7} class Columns extends React.Component { @@ -83,7 +84,7 @@ class Columns extends React.Component { } ``` -which results in a correct `` output of: +會讓 `
` 得到一個正確的輸出: ```jsx
@@ -94,9 +95,9 @@ which results in a correct `
` output of:
``` -### 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 { @@ -110,12 +111,11 @@ 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和attributes。 ### Keyed Fragments {#keyed-fragments} -Fragments declared with the explicit `` 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: +透過明確宣告``的Fragments可能會遇到帶有key的情況。一個使用案例是將它mapping到Fragments陣列。舉例來說，如下方程式碼一樣建立一個description list。 ```jsx function Glossary(props) { @@ -133,8 +133,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` 的attribute。之後我們可能會支援更多的attribute，像是event handlers。 -### Live Demo {#live-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 f656ebf24b6879103e0df5bd608fe37c643e817a Mon Sep 17 00:00:00 2001 From: "Chong-You, Wu" Date: Tue, 17 Sep 2019 09:44:16 +0800 Subject: [PATCH 02/12] add space on both sides of English words --- content/docs/fragments.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index b714524d0..510583052 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -4,7 +4,7 @@ title: Fragments permalink: docs/fragments.html --- -React其中一種常見的使用情況是在一個component中回傳多個element，Fragements讓你能夠在不用增加額外DOM節點的情況下，重新組合child componenet。 +React 其中一種常見的使用情況是在一個 component 中回傳多個 element，Fragement 讓你能夠在不用增加額外 DOM 節點的情況下，重新組合 child componenet。 ```js render() { @@ -18,12 +18,12 @@ render() { } ``` -還有一種更[簡短的語法](#short-syntax)可以用來宣告。 +還有一種更[簡短的語法](#short-syntax)可以用來宣告 Fragment。 ## 動機 {#motivation} -常見的情況是component回傳一連串的child element，看看這個React的程式碼片段: +常見的情況是 component 回傳一連串的 child element，看看這個 React 的程式碼片段： ```jsx class Table extends React.Component { @@ -39,7 +39,7 @@ class Table extends React.Component { } ``` -為了使render出來的HTML是有效的，`` 需要回傳多個 `` element 。 但如果將parent div 元素放在 ``中的`render()`區塊，將會使生成的HTML無效。 +為了使 render 出來的 HTML 是有效的，`` 需要回傳多個 `` element 。 但如果將 parent div 元素放在 ``中的`render()`區塊，將會使生成的 HTML 無效。 ```jsx class Columns extends React.Component { @@ -54,7 +54,7 @@ class Columns extends React.Component { } ``` -在 `` 內的輸出如下: +在 `
` 內的輸出如下： ```jsx
@@ -67,7 +67,7 @@ class Columns extends React.Component {
``` -這個問題交給Fragments解決。 +這個問題交給 Fragment 解決。 ## 用法 {#usage} @@ -84,7 +84,7 @@ class Columns extends React.Component { } ``` -會讓 `` 得到一個正確的輸出: +會讓 `
` 得到一個正確的輸出： ```jsx
@@ -97,7 +97,7 @@ class Columns extends React.Component { ### 更簡短的語法 {#short-syntax} -你可以用更簡潔的語法來宣告fragments，它看起來就像空標籤: +你可以用更簡潔的語法來宣告 Fragment，它看起來就像空標籤： ```jsx{4,7} class Columns extends React.Component { @@ -111,11 +111,11 @@ class Columns extends React.Component { } } ``` -你可以像使用其他元素一樣使用`<>`，但值得注意的是它並不支援key和attributes。 +你可以像使用其他元素一樣使用`<>`，但值得注意的是它並不支援 key 和 attribute。 ### Keyed Fragments {#keyed-fragments} -透過明確宣告``的Fragments可能會遇到帶有key的情況。一個使用案例是將它mapping到Fragments陣列。舉例來說，如下方程式碼一樣建立一個description list。 +透過明確宣告``的 Fragment 可能會遇到帶有 key 的情況。一個使用案例是將它 mapping 到 Fragment array。舉例來說，如下方程式碼一樣建立一個 description list。 ```jsx function Glossary(props) { @@ -133,8 +133,8 @@ function Glossary(props) { } ``` -目前 `key` 是唯一可以傳遞給 `Fragment` 的attribute。之後我們可能會支援更多的attribute，像是event handlers。 +目前 `key` 是唯一可以傳遞給 `Fragment` 的 attribute 。之後我們可能會支援更多的 attribute，像是 event handlers。 ### 線上展示 {#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 988dfb05726034ef96ba66cc9e952dda560bfa6a Mon Sep 17 00:00:00 2001 From: "Chong-You, Wu" Date: Tue, 17 Sep 2019 21:05:13 +0800 Subject: [PATCH 03/12] add extra spaces --- 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 510583052..88a291e87 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -23,7 +23,7 @@ render() { ## 動機 {#motivation} -常見的情況是 component 回傳一連串的 child element，看看這個 React 的程式碼片段： +常見的情況是在 component 裡回傳一連串的 child element，看看這個 React 的程式碼片段： ```jsx class Table extends React.Component { @@ -39,7 +39,7 @@ class Table extends React.Component { } ``` -為了使 render 出來的 HTML 是有效的，`` 需要回傳多個 `
` element 。 但如果將 parent div 元素放在 ``中的`render()`區塊，將會使生成的 HTML 無效。 +為了使 render 出來的 HTML 是有效的，`` 需要回傳多個 `` element 。 但如果將 parent div 元素放在 `` 中的 `render()` 區塊，將會使生成的 HTML 無效。 ```jsx class Columns extends React.Component { @@ -111,11 +111,11 @@ class Columns extends React.Component { } } ``` -你可以像使用其他元素一樣使用`<>`，但值得注意的是它並不支援 key 和 attribute。 +你可以像使用其他元素一樣使用 `<>`，但值得注意的是它並不支援 key 和 attribute。 ### Keyed Fragments {#keyed-fragments} -透過明確宣告``的 Fragment 可能會遇到帶有 key 的情況。一個使用案例是將它 mapping 到 Fragment array。舉例來說，如下方程式碼一樣建立一個 description list。 +透過明確宣告 `` 的 Fragment 可能會遇到帶有 key 的情況。一個使用案例是將它 mapping 到 Fragment array。舉例來說，像下方程式碼一樣建立一個敘述列表。 ```jsx function Glossary(props) { From 107f8cbe8b1e4e3fd7e816fb3c9a5fe6d2cf1ead Mon Sep 17 00:00:00 2001 From: "Chong-You, Wu" Date: Thu, 19 Sep 2019 19:17:31 +0800 Subject: [PATCH 04/12] Update content/docs/fragments.md Co-Authored-By: Peng Jie --- 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 88a291e87..bd15c4a58 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -4,7 +4,7 @@ title: Fragments permalink: docs/fragments.html --- -React 其中一種常見的使用情況是在一個 component 中回傳多個 element，Fragement 讓你能夠在不用增加額外 DOM 節點的情況下，重新組合 child componenet。 +React 其中一種常見的使用情況是在一個 component 中回傳多個 element，Fragement 讓你能夠在不用增加額外 DOM 節點的情況下，重新組合 child component。 ```js render() { From e533b56cd874b65eef3dd7e9e7cf0f19f547b96e Mon Sep 17 00:00:00 2001 From: "Chong-You, Wu" Date: Thu, 19 Sep 2019 19:21:53 +0800 Subject: [PATCH 05/12] Update content/docs/fragments.md Co-Authored-By: Peng Jie --- 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 bd15c4a58..176edd0be 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -39,7 +39,7 @@ class Table extends React.Component { } ``` -為了使 render 出來的 HTML 是有效的，`` 需要回傳多個 `` element 。 但如果將 parent div 元素放在 `` 中的 `render()` 區塊，將會使生成的 HTML 無效。 +為了使 render 出來的 HTML 是有效的，`` 需要回傳多個 `` element。如果將 parent div 元素放在 `` 中的 `render()` 區塊，將會使生成的 HTML 無效。 ```jsx class Columns extends React.Component { From 0021ec358d69cd3d5281b81950cb69d0debef447 Mon Sep 17 00:00:00 2001 From: "Chong-You, Wu" Date: Thu, 19 Sep 2019 23:50:56 +0800 Subject: [PATCH 06/12] Update content/docs/fragments.md Co-Authored-By: Peng Jie --- 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 176edd0be..330832ea3 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -18,7 +18,7 @@ render() { } ``` -還有一種更[簡短的語法](#short-syntax)可以用來宣告 Fragment。 +還有一種[簡寫語法](#short-syntax)可以用來宣告 fragment。 ## 動機 {#motivation} From 3747008529006c90396951bc0e0ed5b2aa89d460 Mon Sep 17 00:00:00 2001 From: "Chong-You, Wu" Date: Thu, 19 Sep 2019 23:51:14 +0800 Subject: [PATCH 07/12] Update content/docs/fragments.md Co-Authored-By: Peng Jie --- 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 330832ea3..2003d5235 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -67,7 +67,7 @@ class Columns extends React.Component {
``` -這個問題交給 Fragment 解決。 +這個問題交給 fragment 解決。 ## 用法 {#usage} From d3624d6e9922b89206288dc67154824a6a16f559 Mon Sep 17 00:00:00 2001 From: "Chong-You, Wu" Date: Thu, 19 Sep 2019 23:51:38 +0800 Subject: [PATCH 08/12] Update content/docs/fragments.md Co-Authored-By: Peng Jie --- 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 2003d5235..a621beb37 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -97,7 +97,7 @@ class Columns extends React.Component { ### 更簡短的語法 {#short-syntax} -你可以用更簡潔的語法來宣告 Fragment，它看起來就像空標籤： +你可以用新的簡寫語法來宣告 fragment，它看起來就像空標籤： ```jsx{4,7} class Columns extends React.Component { From 34e9ff342cc1a63138cf87bd9508f33d27cfb1dc Mon Sep 17 00:00:00 2001 From: "Chong-You, Wu" Date: Fri, 20 Sep 2019 22:41:39 +0800 Subject: [PATCH 09/12] Update content/docs/fragments.md Co-Authored-By: Peng Jie --- 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 a621beb37..c5647e838 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -115,7 +115,7 @@ class Columns extends React.Component { ### Keyed Fragments {#keyed-fragments} -透過明確宣告 `` 的 Fragment 可能會遇到帶有 key 的情況。一個使用案例是將它 mapping 到 Fragment array。舉例來說，像下方程式碼一樣建立一個敘述列表。 +透過明確宣告 `` 的 fragment 可能會遇到帶有 key 的情況。一個使用案例是將它 mapping 到 fragment array。舉例來說，像下方程式碼一樣建立一個敘述列表： ```jsx function Glossary(props) { From 49b7d1ac8505d0bfe381ddc39d59c21767c3c96e Mon Sep 17 00:00:00 2001 From: "Chong-You, Wu" Date: Fri, 20 Sep 2019 22:41:58 +0800 Subject: [PATCH 10/12] Update content/docs/fragments.md Co-Authored-By: Peng Jie --- 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 c5647e838..72d27d6b7 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -133,7 +133,7 @@ function Glossary(props) { } ``` -目前 `key` 是唯一可以傳遞給 `Fragment` 的 attribute 。之後我們可能會支援更多的 attribute，像是 event handlers。 +目前 `key` 是唯一可以傳遞給 `Fragment` 的 attribute。之後我們可能會支援更多的 attribute，像是 event handler。 ### 線上展示 {#live-demo} From c20dc450b325c0d3c1a942c0af3be4e9b3fa02da Mon Sep 17 00:00:00 2001 From: "Chong-You, Wu" Date: Fri, 20 Sep 2019 22:47:11 +0800 Subject: [PATCH 11/12] Correct some spelling and capitalization --- 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 72d27d6b7..f03361e0d 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -4,7 +4,7 @@ title: Fragments permalink: docs/fragments.html --- -React 其中一種常見的使用情況是在一個 component 中回傳多個 element，Fragement 讓你能夠在不用增加額外 DOM 節點的情況下，重新組合 child component。 +React 其中一種常見的使用情況是在一個 component 中回傳多個 element，fragment 讓你能夠在不用增加額外 DOM 節點的情況下，重新組合 child component。 ```js render() { @@ -69,7 +69,7 @@ class Columns extends React.Component { 這個問題交給 fragment 解決。 -## 用法 {#usage} +## 使用方式 {#usage} ```jsx{4,7} class Columns extends React.Component { @@ -95,7 +95,7 @@ class Columns extends React.Component { ``` -### 更簡短的語法 {#short-syntax} +### 簡寫語法 {#short-syntax} 你可以用新的簡寫語法來宣告 fragment，它看起來就像空標籤： @@ -135,6 +135,6 @@ function Glossary(props) { 目前 `key` 是唯一可以傳遞給 `Fragment` 的 attribute。之後我們可能會支援更多的 attribute，像是 event handler。 -### 線上展示 {#live-demo} +### Live Demo {#live-demo} 你可以透過 [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000) 嘗試新的 JSX fragment 語法。 From 25c9b92fa23068601626970cae3ae5a843d23170 Mon Sep 17 00:00:00 2001 From: "Chong-You, Wu" Date: Wed, 25 Sep 2019 14:10:00 +0800 Subject: [PATCH 12/12] add translation at line 125 --- 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 f03361e0d..f22a4425b 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -122,7 +122,7 @@ function Glossary(props) { return (
{props.items.map(item => ( - // Without the `key`, React will fire a key warning + // 如果缺少 key ， React 會發出一個缺少 key 的警告
{item.term}
{item.description}