Skip to content

Fix: fragment example update #13

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: fragment example update #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
118 changes: 88 additions & 30 deletions questions/what-are-react-fragments-used-for/en-US.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ title: What are React Fragments used for?
React Fragments are used to group multiple elements without adding extra nodes to the DOM. This is useful when you want to return multiple elements from a component's render method without wrapping them in an additional HTML element. You can use the shorthand syntax `<>...</>` or the `React.Fragment` syntax.

```jsx
return (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
);
function MyComponent() {
return (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
);
}
```

---
Expand All @@ -34,46 +36,102 @@ There are two ways to use React Fragments:
1. **Shorthand syntax**: This is the most concise way to use fragments. It uses empty tags `<>...</>`.

```jsx
return (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
);
function MyComponent() {
return (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
);
}
```

2. **Full syntax**: This uses `React.Fragment` and can be useful if you need to add keys to the fragment.

```jsx
return (
<React.Fragment>
<ChildComponent1 />
<ChildComponent2 />
</React.Fragment>
);
function MyComponent() {
return (
<React.Fragment>
<ChildComponent1 />
<ChildComponent2 />
</React.Fragment>
);
}
```

### Adding keys to fragments

If you need to add keys to the elements within a fragment, you must use the full `React.Fragment` syntax. This is useful when rendering a list of elements.

```jsx
return (
<>
{items.map((item) => (
<React.Fragment key={item.id}>
<ChildComponent />
</React.Fragment>
))}
</>
);
function MyComponent({ items }) {
return (
<ul>
{items.map((item) => (
<React.Fragment key={item.id}>
<li>{item.name}</li>
<li>{item.description}</li>
</React.Fragment>
))}
</ul>
);
}
```

### Use cases

- **Returning multiple elements from a component**: When a component needs to return multiple sibling elements, using a fragment can help avoid unnecessary wrapper elements.
- **Rendering lists**: When rendering a list of elements, fragments can be used to group the list items without adding extra nodes to the DOM.
- **Conditional rendering**: When conditionally rendering multiple elements, fragments can help keep the DOM structure clean.
#### Returning multiple elements from a component

When a component needs to return multiple sibling elements, using a fragment can help avoid unnecessary wrapper elements.

```jsx
function MyComponent() {
return (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
);
}
```

#### Table rows (Fragment is necessary)

Fragments are **required** when rendering multiple table cells (`<td>`) because HTML table structure doesn't allow wrapper elements between `<tr>` and `<td>`. Using a `<div>` wrapper would create invalid HTML.

```jsx
function TableRow({ data }) {
return (
<tr>
<React.Fragment>
<td>{data.name}</td>
<td>{data.value}</td>
</React.Fragment>
</tr>
);
}
```

#### Conditional rendering

When conditionally rendering multiple elements, fragments help keep the DOM structure clean.

```jsx
function MyComponent({ isActive }) {
return (
<>
{isActive ? (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
) : (
<ChildComponent3 />
)}
</>
);
}
```

## Further reading

Expand Down
118 changes: 88 additions & 30 deletions questions/what-are-react-fragments-used-for/zh-CN.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ title: React Fragments 有什么用？
React Fragments 用于对多个元素进行分组，而无需向 DOM 添加额外的节点。当您希望从组件的 render 方法返回多个元素，而无需将它们包裹在额外的 HTML 元素中时，这非常有用。您可以使用简写语法 `<>...</>` 或 `React.Fragment` 语法。

```jsx
return (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
);
function MyComponent() {
return (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
);
}
```

***
Expand All @@ -34,46 +36,102 @@ React Fragments 允许您对多个元素进行分组，而无需向 DOM 添加
1. **简写语法**：这是使用 fragments 最简洁的方式。它使用空标签 `<>...</>`。

```jsx
return (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
);
function MyComponent() {
return (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
);
}
```

2. **完整语法**：这使用 `React.Fragment`，如果您需要向 fragment 添加键，这可能很有用。

```jsx
return (
<React.Fragment>
<ChildComponent1 />
<ChildComponent2 />
</React.Fragment>
);
function MyComponent() {
return (
<React.Fragment>
<ChildComponent1 />
<ChildComponent2 />
</React.Fragment>
);
}
```

### 向 fragments 添加键

如果您需要向 fragment 中的元素添加键，则必须使用完整的 `React.Fragment` 语法。这在渲染元素列表时很有用。

```jsx
return (
<>
{items.map((item) => (
<React.Fragment key={item.id}>
<ChildComponent />
</React.Fragment>
))}
</>
);
function MyComponent({ items }) {
return (
<ul>
{items.map((item) => (
<React.Fragment key={item.id}>
<li>{item.name}</li>
<li>{item.description}</li>
</React.Fragment>
))}
</ul>
);
}
```

### 用例

* **从组件返回多个元素**：当组件需要返回多个兄弟元素时，使用 fragment 可以帮助避免不必要的包装元素。
* **渲染列表**：渲染元素列表时，可以使用 fragments 对列表项进行分组，而无需向 DOM 添加额外的节点。
* **条件渲染**：当有条件地渲染多个元素时，fragments 可以帮助保持 DOM 结构的整洁。
#### 从组件返回多个元素

当组件需要返回多个兄弟元素时，使用 fragment 可以帮助避免不必要的包装元素。

```jsx
function MyComponent() {
return (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
);
}
```

#### 表格行（Fragment 是必需的）

在渲染多个表格单元格（`<td>`）时，Fragment 是**必需的**，因为 HTML 表格结构不允许在 `<tr>` 和 `<td>` 之间使用包装元素。使用 `<div>` 包装会导致无效的 HTML。

```jsx
function TableRow({ data }) {
return (
<tr>
<React.Fragment>
<td>{data.name}</td>
<td>{data.value}</td>
</React.Fragment>
</tr>
);
}
```

#### 条件渲染

当有条件地渲染多个元素时，fragments 可以帮助保持 DOM 结构的整洁。

```jsx
function MyComponent({ isActive }) {
return (
<>
{isActive ? (
<>
<ChildComponent1 />
<ChildComponent2 />
</>
) : (
<ChildComponent3 />
)}
</>
);
}
```

## 延伸阅读

Expand Down