diff --git a/questions/what-are-react-fragments-used-for/en-US.mdx b/questions/what-are-react-fragments-used-for/en-US.mdx index 998e4c2..b254333 100644 --- a/questions/what-are-react-fragments-used-for/en-US.mdx +++ b/questions/what-are-react-fragments-used-for/en-US.mdx @@ -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 ( - <> - - - -); +function MyComponent() { + return ( + <> + + + + ); +} ``` --- @@ -34,23 +36,27 @@ 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 ( - <> - - - - ); + function MyComponent() { + return ( + <> + + + + ); + } ``` 2. **Full syntax**: This uses `React.Fragment` and can be useful if you need to add keys to the fragment. ```jsx - return ( - - - - - ); + function MyComponent() { + return ( + + + + + ); + } ``` ### Adding keys to fragments @@ -58,22 +64,74 @@ There are two ways to use React 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) => ( - - - - ))} - -); +function MyComponent({ items }) { + return ( +
    + {items.map((item) => ( + +
  • {item.name}
    • +
  • {item.description}
    • +     + ))} +
+ ); +} ``` ### 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 ( + <> + + + + ); +} +``` + +#### Table rows (Fragment is necessary) + +Fragments are **required** when rendering multiple table cells (``) because HTML table structure doesn't allow wrapper elements between `` and ``. Using a `
` wrapper would create invalid HTML. + +```jsx +function TableRow({ data }) { + return ( + + + {data.name} + {data.value} + + + ); +} +``` + +#### Conditional rendering + +When conditionally rendering multiple elements, fragments help keep the DOM structure clean. + +```jsx +function MyComponent({ isActive }) { + return ( + <> + {isActive ? ( + <> + + + + ) : ( + + )} + + ); +} +``` ## Further reading diff --git a/questions/what-are-react-fragments-used-for/zh-CN.mdx b/questions/what-are-react-fragments-used-for/zh-CN.mdx index f26a822..7ab33e6 100644 --- a/questions/what-are-react-fragments-used-for/zh-CN.mdx +++ b/questions/what-are-react-fragments-used-for/zh-CN.mdx @@ -7,12 +7,14 @@ title: React Fragments 有什么用？ React Fragments 用于对多个元素进行分组，而无需向 DOM 添加额外的节点。当您希望从组件的 render 方法返回多个元素，而无需将它们包裹在额外的 HTML 元素中时，这非常有用。您可以使用简写语法 `<>...` 或 `React.Fragment` 语法。 ```jsx -return ( - <> - - - -); +function MyComponent() { + return ( + <> + + + + ); +} ``` *** @@ -34,23 +36,27 @@ React Fragments 允许您对多个元素进行分组，而无需向 DOM 添加 1. **简写语法**：这是使用 fragments 最简洁的方式。它使用空标签 `<>...`。 ```jsx - return ( - <> - - - - ); + function MyComponent() { + return ( + <> + + + + ); + } ``` 2. **完整语法**：这使用 `React.Fragment`，如果您需要向 fragment 添加键，这可能很有用。 ```jsx - return ( - - - - - ); + function MyComponent() { + return ( + + + + + ); + } ``` ### 向 fragments 添加键 @@ -58,22 +64,74 @@ React Fragments 允许您对多个元素进行分组，而无需向 DOM 添加 如果您需要向 fragment 中的元素添加键，则必须使用完整的 `React.Fragment` 语法。这在渲染元素列表时很有用。 ```jsx -return ( - <> - {items.map((item) => ( - - - - ))} - -); +function MyComponent({ items }) { + return ( +
    + {items.map((item) => ( + +
  • {item.name}
    • +
  • {item.description}
    • +     + ))} +
+ ); +} ``` ### 用例 -* **从组件返回多个元素**：当组件需要返回多个兄弟元素时，使用 fragment 可以帮助避免不必要的包装元素。 -* **渲染列表**：渲染元素列表时，可以使用 fragments 对列表项进行分组，而无需向 DOM 添加额外的节点。 -* **条件渲染**：当有条件地渲染多个元素时，fragments 可以帮助保持 DOM 结构的整洁。 +#### 从组件返回多个元素 + +当组件需要返回多个兄弟元素时，使用 fragment 可以帮助避免不必要的包装元素。 + +```jsx +function MyComponent() { + return ( + <> + + + + ); +} +``` + +#### 表格行（Fragment 是必需的） + +在渲染多个表格单元格（``）时，Fragment 是**必需的**，因为 HTML 表格结构不允许在 `` 和 `` 之间使用包装元素。使用 `
` 包装会导致无效的 HTML。 + +```jsx +function TableRow({ data }) { + return ( + + + {data.name} + {data.value} + + + ); +} +``` + +#### 条件渲染 + +当有条件地渲染多个元素时，fragments 可以帮助保持 DOM 结构的整洁。 + +```jsx +function MyComponent({ isActive }) { + return ( + <> + {isActive ? ( + <> + + + + ) : ( + + )} + + ); +} +``` ## 延伸阅读