You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
26
+
単一の要素が必要な場合は、`<Fragment>`でラップすると複数の要素をグループ化することができます。`Fragment`で要素をグループ化しても、出力される DOM には影響を与えません。要素がグループ化されていないときと同じです。空の JSX タグ`<></>`は、ほとんどの場合 `<Fragment></Fragment>`の省略記法です。
27
27
28
-
#### Props {/*props*/}
28
+
#### props {/*props*/}
29
29
30
-
-**optional**`key`: Fragments declared with the explicit `<Fragment>`syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
- 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>`.
35
-
36
-
- 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)
### Returning multiple elements {/*returning-multiple-elements*/}
41
+
### 複数の要素を返す {/*returning-multiple-elements*/}
43
42
44
-
Use`Fragment`, or the equivalent `<>...</>`syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:
Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `<h1>`and`<article>` DOM nodes appear as siblings without wrappers around them:
56
+
フラグメントは便利です。なぜなら、DOM 要素のような他のコンテナで要素をラップする場合と異なり、フラグメントで要素をグループ化してもレイアウトやスタイルに影響を与えないからです。この例を、ブラウザツールでインスペクト（inspect, 調査）してみると、全ての `<h1>`や`<article>` DOM ノードがラップされずに兄弟として表示されることがわかります。
58
57
59
58
<Sandpack>
60
59
@@ -94,9 +93,9 @@ function PostBody({ body }) {
94
93
95
94
<DeepDive>
96
95
97
-
#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/}
96
+
#### 特別な構文を使わずに Fragment をどのように記述するか？ {/*how-to-write-a-fragment-without-the-special-syntax*/}
98
97
99
-
The example above is equivalent to importing `Fragment`from React:
98
+
上述の例は、React から `Fragment`をインポートすることと同じです：
100
99
101
100
```js {1,5,8}
102
101
import { Fragment } from'react';
@@ -111,15 +110,14 @@ function Post() {
111
110
}
112
111
```
113
112
114
-
Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments)
You can use `Fragment`to group text together with components:
142
+
`Fragment`を使うとテキストとコンポーネントを一度にグループ化することができます：
145
143
146
144
```js
147
145
functionDateRangePicker({ start, end }) {
@@ -158,9 +156,9 @@ function DateRangePicker({ start, end }) {
158
156
159
157
---
160
158
161
-
### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/}
159
+
### Fragment のリストをレンダーする {/*rendering-a-list-of-fragments*/}
162
160
163
-
Here's a situation where you need to write `Fragment` explicitly instead of using the `<></>`syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key`to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key`attribute:
0 commit comments