wip

Author: jp-knj

Diff for: src/content/reference/react/Fragment.md

@@ -4,7 +4,7 @@ title: <Fragment> (<>...</>)
 
 <Intro>
 
-`<Fragment>`, often used via `<>...</>` syntax, lets you group elements without a wrapper node.
+`<Fragment>`,よく`<>...</>`の形式で使用されます。ラッパーノードを必要とせずに要素をグループ化してくれます。
 
 ```js
 <>
@@ -19,22 +19,21 @@ title: <Fragment> (<>...</>)
 
 ---
 
-## Reference {/*reference*/}
+## リファレンス {/*reference*/}
 
 ### `<Fragment>` {/*fragment*/}
 
-Wrap elements in `<Fragment>` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<></>` is shorthand for `<Fragment></Fragment>` in most cases.
+単一の要素が必要なときで複数の要素をまとめるために `<Fragment>` でラップします。Fragment で要素をまとめても、結果となる DOM には影響を与えません。要素がまとめられていないときと同じです。空の JSX タグ `<></>` は、ほとんどの場合 `<Fragment></Fragment>` のショートハンドです。
 
 #### Props {/*props*/}
 
-- **optional** `key`: Fragments declared with the explicit `<Fragment>` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
+- **省略可能** `key`: 明示的な `<Fragment>` 構文で宣言されたフラグメントは [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key)を持つことができます。
 
-#### Caveats {/*caveats*/}
+#### 注意点 {/*caveats*/}
 
-- If you want to pass `key` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment key={yourKey}>...</Fragment>`.
-
-- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<><Child /></>` to `[<Child />]` or back, or when you go from rendering `<><Child /></>` to `<Child />` and back. This only works a single level deep: for example, going from `<><><Child /></></>` to `<Child />` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
+- `key` をフラグメントに渡したいなら、`<>...</>` の構文を使用することはできません。`'react'` から `Fragment` を明示的にインポートし、`<Fragment key={yourKey}>...</Fragment>` をレンダーする必要があります。
 
+- React は、`<><Child /></>` のレンダーから `[<Child />]` への変更、あるいはその逆、または `<><Child /></>` のレンダーから `<Child />` への変更、その逆に移行するときに [state をリセット](/learn/preserving-and-resetting-state) しません。これは 1 つのレベルまでのみ機能します：例えば、`<><><Child /></></>` から `<Child />` への変更は state をリセットします。詳細については [こちら](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) をご覧ください。
 ---
 
 ## Usage {/*usage*/}