Skip to content

Translate "<Fragment>" #626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 4, 2023
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions src/content/reference/react/Fragment.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: <Fragment> (<>...</>)

<Intro>

`<Fragment>`, often used via `<>...</>` syntax, lets you group elements without a wrapper node.
`<Fragment>` は頻繁に `<>...</>` 構文で使用され、ノードでラップせずに要素をグループ化することができます。

```js
<>
Expand All @@ -19,29 +19,29 @@ 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*/}
#### 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>`.
- `key` をフラグメントに渡したい場合は、`<>...</>` 構文を使用することはできません。`'react'` から `Fragment` を明示的にインポートし、`<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)
- React は、`<><Child /></>` のレンダーから `[<Child />]` に変更されるときか戻るとき、または `<><Child /></>` のレンダーから `<Child />` に変更されるときや戻るときは [state はリセット](/learn/preserving-and-resetting-state)されません。これは単一レベルの深さのときのみ動作します:例えば、`<><><Child /></></>` から `<Child />` への変更は state がリセットされます。詳細なセマンティクス(semantics, 意味論)は[こちら](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)を参照してください。

---

## Usage {/*usage*/}
## 使用法 {/*usage*/}

### Returning multiple elements {/*returning-multiple-elements*/}
### 複数の要素を返す {/*returning-multiple-elements*/}

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:
複数の要素をグループ化するために `Fragment` や同等の `<>...</>` 構文を使用することができます。単一の要素が行き来できる場所ならどこでも、複数の要素を配置することができます。例えば、1 つのコンポーネントは 1 つの要素しか返すことができませんが、フラグメントを使用すれば複数の要素を一度にグループ化して、それらをグループとして返します。

```js {3,6}
function Post() {
Expand All @@ -54,7 +54,7 @@ function Post() {
}
```

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:
フラグメントは便利です。なぜなら、DOM 要素のような他のコンテナで要素をラップする場合と異なり、フラグメントで要素をグループ化してもレイアウトやスタイルに影響を与えないからです。この例を、ブラウザツールでインスペクト(inspect, 調査)してみると、全ての `<h1>` `<article>` DOM ノードがラップされずに兄弟として表示されることがわかります。

<Sandpack>

Expand Down Expand Up @@ -94,9 +94,9 @@ function PostBody({ body }) {

<DeepDive>

#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/}
#### 特別な構文を使わずに Fragment をどのように記述するか? {/*how-to-write-a-fragment-without-the-special-syntax*/}

The example above is equivalent to importing `Fragment` from React:
上述の例は、React から `Fragment` をインポートすることと同じです:

```js {1,5,8}
import { Fragment } from 'react';
Expand All @@ -111,15 +111,15 @@ function Post() {
}
```

Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments)
通常なら [`Fragment` に `key` を渡す](#rendering-a-list-of-fragments) 場合以外では必要ありません。

</DeepDive>

---

### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/}
### 複数の要素を変数に割り当てる {/*assigning-multiple-elements-to-a-variable*/}

Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:
他の要素と同じように、フラグメントの要素を変数に割り当てたり、props として渡したりすることができます:

```js
function CloseDialog() {
Expand All @@ -139,9 +139,9 @@ function CloseDialog() {

---

### Grouping elements with text {/*grouping-elements-with-text*/}
### テキストと要素をグループ化する {/*grouping-elements-with-text*/}

You can use `Fragment` to group text together with components:
`Fragment` を使うとテキストとコンポーネントを一度にグループ化することができます:

```js
function DateRangePicker({ start, end }) {
Expand All @@ -158,9 +158,9 @@ function DateRangePicker({ start, end }) {

---

### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/}
### Fragment のリストをレンダーする {/*rendering-a-list-of-fragments*/}

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:
こちらは `<></>` 構文の代わりに `Fragment` を明示的に記述する必要がある場面です。ループ内で[複数の要素をレンダーする](/learn/rendering-lists)ときには、各要素に `key` を割り当てる必要があります。ループ内の要素がフラグメントの場合は、`key` 属性を提供するために通常の JSX 要素の構文を使用する必要があります。

```js {3,6}
function Blog() {
Expand All @@ -173,7 +173,7 @@ function Blog() {
}
```

You can inspect the DOM to verify that there are no wrapper elements around the Fragment children:
フラグメントの子要素のまわりにラッパー要素がないことを確認するために、DOM をインスペクトできます:

<Sandpack>

Expand Down