Skip to content

Commit 8dc7165

Browse files
DmytrovkxzDmytrovkxz
committed
fix: fragment example update
1 parent fed668b commit 8dc7165

File tree

2 files changed

+176
-60
lines changed

2 files changed

+176
-60
lines changed

‎questions/what-are-react-fragments-used-for/en-US.mdx‎

Lines changed: 88 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@ title: What are React Fragments used for?
77
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.
88

99
```jsx
10-
return (
11-
<>
12-
<ChildComponent1 />
13-
<ChildComponent2 />
14-
</>
15-
);
10+
function MyComponent() {
11+
return (
12+
<>
13+
<ChildComponent1 />
14+
<ChildComponent2 />
15+
</>
16+
);
17+
}
1618
```
1719

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

3638
```jsx
37-
return (
38-
<>
39-
<ChildComponent1 />
40-
<ChildComponent2 />
41-
</>
42-
);
39+
function MyComponent() {
40+
return (
41+
<>
42+
<ChildComponent1 />
43+
<ChildComponent2 />
44+
</>
45+
);
46+
}
4347
```
4448

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

4751
```jsx
48-
return (
49-
<React.Fragment>
50-
<ChildComponent1 />
51-
<ChildComponent2 />
52-
</React.Fragment>
53-
);
52+
function MyComponent() {
53+
return (
54+
<React.Fragment>
55+
<ChildComponent1 />
56+
<ChildComponent2 />
57+
</React.Fragment>
58+
);
59+
}
5460
```
5561

5662
### Adding keys to fragments
5763

5864
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.
5965

6066
```jsx
61-
return (
62-
<>
63-
{items.map((item) => (
64-
<React.Fragment key={item.id}>
65-
<ChildComponent />
66-
</React.Fragment>
67-
))}
68-
</>
69-
);
67+
function MyComponent({ items }) {
68+
return (
69+
<ul>
70+
{items.map((item) => (
71+
<React.Fragment key={item.id}>
72+
<li>{item.name}</li>
73+
<li>{item.description}</li>
74+
</React.Fragment>
75+
))}
76+
</ul>
77+
);
78+
}
7079
```
7180

7281
### Use cases
7382

74-
- **Returning multiple elements from a component**: When a component needs to return multiple sibling elements, using a fragment can help avoid unnecessary wrapper elements.
75-
- **Rendering lists**: When rendering a list of elements, fragments can be used to group the list items without adding extra nodes to the DOM.
76-
- **Conditional rendering**: When conditionally rendering multiple elements, fragments can help keep the DOM structure clean.
83+
#### Returning multiple elements from a component
84+
85+
When a component needs to return multiple sibling elements, using a fragment can help avoid unnecessary wrapper elements.
86+
87+
```jsx
88+
function MyComponent() {
89+
return (
90+
<>
91+
<ChildComponent1 />
92+
<ChildComponent2 />
93+
</>
94+
);
95+
}
96+
```
97+
98+
#### Table rows (Fragment is necessary)
99+
100+
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.
101+
102+
```jsx
103+
function TableRow({ data }) {
104+
return (
105+
<tr>
106+
<React.Fragment>
107+
<td>{data.name}</td>
108+
<td>{data.value}</td>
109+
</React.Fragment>
110+
</tr>
111+
);
112+
}
113+
```
114+
115+
#### Conditional rendering
116+
117+
When conditionally rendering multiple elements, fragments help keep the DOM structure clean.
118+
119+
```jsx
120+
function MyComponent({ isActive }) {
121+
return (
122+
<>
123+
{isActive ? (
124+
<>
125+
<ChildComponent1 />
126+
<ChildComponent2 />
127+
</>
128+
) : (
129+
<ChildComponent3 />
130+
)}
131+
</>
132+
);
133+
}
134+
```
77135

78136
## Further reading
79137

‎questions/what-are-react-fragments-used-for/zh-CN.mdx‎

Lines changed: 88 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@ title: React Fragments 有什么用？
77
React Fragments 用于对多个元素进行分组，而无需向 DOM 添加额外的节点。当您希望从组件的 render 方法返回多个元素，而无需将它们包裹在额外的 HTML 元素中时，这非常有用。您可以使用简写语法 `<>...</>` 或 `React.Fragment` 语法。
88

99
```jsx
10-
return (
11-
<>
12-
<ChildComponent1 />
13-
<ChildComponent2 />
14-
</>
15-
);
10+
function MyComponent() {
11+
return (
12+
<>
13+
<ChildComponent1 />
14+
<ChildComponent2 />
15+
</>
16+
);
17+
}
1618
```
1719

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

3638
```jsx
37-
return (
38-
<>
39-
<ChildComponent1 />
40-
<ChildComponent2 />
41-
</>
42-
);
39+
function MyComponent() {
40+
return (
41+
<>
42+
<ChildComponent1 />
43+
<ChildComponent2 />
44+
</>
45+
);
46+
}
4347
```
4448

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

4751
```jsx
48-
return (
49-
<React.Fragment>
50-
<ChildComponent1 />
51-
<ChildComponent2 />
52-
</React.Fragment>
53-
);
52+
function MyComponent() {
53+
return (
54+
<React.Fragment>
55+
<ChildComponent1 />
56+
<ChildComponent2 />
57+
</React.Fragment>
58+
);
59+
}
5460
```
5561

5662
### 向 fragments 添加键
5763

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

6066
```jsx
61-
return (
62-
<>
63-
{items.map((item) => (
64-
<React.Fragment key={item.id}>
65-
<ChildComponent />
66-
</React.Fragment>
67-
))}
68-
</>
69-
);
67+
function MyComponent({ items }) {
68+
return (
69+
<ul>
70+
{items.map((item) => (
71+
<React.Fragment key={item.id}>
72+
<li>{item.name}</li>
73+
<li>{item.description}</li>
74+
</React.Fragment>
75+
))}
76+
</ul>
77+
);
78+
}
7079
```
7180

7281
### 用例
7382

74-
* **从组件返回多个元素**：当组件需要返回多个兄弟元素时，使用 fragment 可以帮助避免不必要的包装元素。
75-
* **渲染列表**：渲染元素列表时，可以使用 fragments 对列表项进行分组，而无需向 DOM 添加额外的节点。
76-
* **条件渲染**：当有条件地渲染多个元素时，fragments 可以帮助保持 DOM 结构的整洁。
83+
#### 从组件返回多个元素
84+
85+
当组件需要返回多个兄弟元素时，使用 fragment 可以帮助避免不必要的包装元素。
86+
87+
```jsx
88+
function MyComponent() {
89+
return (
90+
<>
91+
<ChildComponent1 />
92+
<ChildComponent2 />
93+
</>
94+
);
95+
}
96+
```
97+
98+
#### 表格行（Fragment 是必需的）
99+
100+
在渲染多个表格单元格（`<td>`）时，Fragment 是**必需的**，因为 HTML 表格结构不允许在 `<tr>` 和 `<td>` 之间使用包装元素。使用 `<div>` 包装会导致无效的 HTML。
101+
102+
```jsx
103+
function TableRow({ data }) {
104+
return (
105+
<tr>
106+
<React.Fragment>
107+
<td>{data.name}</td>
108+
<td>{data.value}</td>
109+
</React.Fragment>
110+
</tr>
111+
);
112+
}
113+
```
114+
115+
#### 条件渲染
116+
117+
当有条件地渲染多个元素时，fragments 可以帮助保持 DOM 结构的整洁。
118+
119+
```jsx
120+
function MyComponent({ isActive }) {
121+
return (
122+
<>
123+
{isActive ? (
124+
<>
125+
<ChildComponent1 />
126+
<ChildComponent2 />
127+
</>
128+
) : (
129+
<ChildComponent3 />
130+
)}
131+
</>
132+
);
133+
}
134+
```
77135

78136
## 延伸阅读
79137

0 commit comments

Comments
 (0)