"}]," DOM 节点都显示为没有封装器的兄弟节点："]}],"\n",["$r","p",null,{"children":["¥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 ",["$r","code",null,{"children":"

"}]," and ",["$r","code",null,{"children":"
"}]," DOM nodes appear as siblings without wrappers around them:"]}],"\n"]}],["$r","Sandpack",null,{"children":["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"export default function Blog() {\n return (\n <>\n \n \n \n )\n}\n\nfunction Post({ title, body }) {\n return (\n <>\n \n \n \n );\n}\n\nfunction PostTitle({ title }) {\n return
{title}
\n}\n\nfunction PostBody({ body }) {\n return (\n
\n
{body}
\n
\n );\n}\n"}]}]}],["$r","MaxWidth","136",{"children":["\n",["$r","DeepDive",null,{"children":[["$r","h4",null,{"id":"how-to-write-a-fragment-without-the-special-syntax","children":"如何在没有特殊语法的情况下编写 Fragment？ "}],["$r","p",null,{"children":"¥How to write a Fragment without the special syntax?"}],["$r","p",null,{"children":["上面的例子相当于从 React 导入 ",["$r","code",null,{"children":"Fragment"}],"："]}],["$r","p",null,{"children":["¥The example above is equivalent to importing ",["$r","code",null,{"children":"Fragment"}]," from React:"]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"{1,5,8}","children":"import { Fragment } from 'react';\n\nfunction Post() {\n return (\n \n \n \n \n );\n}\n"}]}],["$r","p",null,{"children":["通常你不需要这个，除非你需要 ",["$r","a",null,{"href":"#rendering-a-list-of-fragments","children":["将 ",["$r","code",null,{"children":"key"}]," 传递给你的 ",["$r","code",null,{"children":"Fragment"}],"。"]}]]}],["$r","p",null,{"children":["¥Usually you won’t need this unless you need to ",["$r","a",null,{"href":"#rendering-a-list-of-fragments","children":["pass a ",["$r","code",null,{"children":"key"}]," to your ",["$r","code",null,{"children":"Fragment"}],"."]}]]}]]}],"\n",["$r","hr",null,{}],"\n",["$r","h3",null,{"id":"assigning-multiple-elements-to-a-variable","children":"将多个元素分配给变量 "}],"\n",["$r","p",null,{"children":"¥Assigning multiple elements to a variable"}],"\n",["$r","p",null,{"children":"与任何其他元素一样，你可以将 Fragment 元素分配给变量，将它们作为属性传递，以此类推："}],"\n",["$r","p",null,{"children":"¥Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:"}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"function CloseDialog() {\n const buttons = (\n <>\n \n \n \n );\n return (\n \n Are you sure you want to leave this page?\n \n );\n}\n"}]}],"\n",["$r","hr",null,{}],"\n",["$r","h3",null,{"id":"grouping-elements-with-text","children":"对使用文本的元素进行分组 "}],"\n",["$r","p",null,{"children":"¥Grouping elements with text"}],"\n",["$r","p",null,{"children":["你可以使用 ",["$r","code",null,{"children":"Fragment"}]," 将文本与组件组合在一起："]}],"\n",["$r","p",null,{"children":["¥You can use ",["$r","code",null,{"children":"Fragment"}]," to group text together with components:"]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"function DateRangePicker({ start, end }) {\n return (\n <>\n From\n \n to\n \n \n );\n}\n"}]}],"\n",["$r","hr",null,{}],"\n",["$r","h3",null,{"id":"rendering-a-list-of-fragments","children":"渲染 Fragment 列表 "}],"\n",["$r","p",null,{"children":"¥Rendering a list of Fragments"}],"\n",["$r","p",null,{"children":["在这种情况下，你需要显式编写 ",["$r","code",null,{"children":"Fragment"}]," 而不是使用 ",["$r","code",null,{"children":"<>"}]," 语法。当你 ",["$r","a",null,{"href":"/learn/rendering-lists","children":"在循环中渲染多个元素"}]," 的时候，你需要给每个元素分配一个 ",["$r","code",null,{"children":"key"}],"。如果循环中的元素是 Fragment，则需要使用普通的 JSX 元素语法来提供 ",["$r","code",null,{"children":"key"}]," 属性："]}],"\n",["$r","p",null,{"children":["¥Here’s a situation where you need to write ",["$r","code",null,{"children":"Fragment"}]," explicitly instead of using the ",["$r","code",null,{"children":"<>"}]," syntax. When you ",["$r","a",null,{"href":"/learn/rendering-lists","children":"render multiple elements in a loop"}],", you need to assign a ",["$r","code",null,{"children":"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 ",["$r","code",null,{"children":"key"}]," attribute:"]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"{3,6}","children":"function Blog() {\n return posts.map(post =>\n \n \n \n \n );\n}\n"}]}],"\n",["$r","p",null,{"children":"你可以检查 DOM 以验证 Fragment 子元素周围没有封装元素："}],"\n",["$r","p",null,{"children":"¥You can inspect the DOM to verify that there are no wrapper elements around the Fragment children:"}],"\n"]}],["$r","Sandpack",null,{"children":["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"import { Fragment } from 'react';\n\nconst posts = [\n { id: 1, title: 'An update', body: \"It's been a while since I posted...\" },\n { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }\n];\n\nexport default function Blog() {\n return posts.map(post =>\n \n \n \n \n );\n}\n\nfunction PostTitle({ title }) {\n return
{title}
\n}\n\nfunction PostBody({ body }) {\n return (\n
\n
{body}
\n
\n );\n}\n"}]}]}],["$r","MaxWidth","last",{"children":["\n",["$r","hr",null,{}],"\n",["$r","CanaryBadge",null,{}],"\n",["$r","p",null,{"children":["使用 Fragment 引用进行 DOM 交互 ",{}]}],"\n",["$r","p",null,{"children":"¥Using Fragment refs for DOM interaction "}],"\n",["$r","p",null,{"children":["Fragment 引用允许你与 Fragment 封装的 DOM 节点进行交互，而无需添加额外的封装器元素。这对于事件处理、可见性跟踪、焦点管理以及替换弃用的模式（例如 ",["$r","code",null,{"children":"ReactDOM.findDOMNode()"}],"）非常有用。"]}],"\n",["$r","p",null,{"children":["¥Fragment refs allow you to interact with the DOM nodes wrapped by a Fragment without adding extra wrapper elements. This is useful for event handling, visibility tracking, focus management, and replacing deprecated patterns like ",["$r","code",null,{"children":"ReactDOM.findDOMNode()"}],"."]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"import { Fragment } from 'react';\n\nfunction ClickableFragment({ children, onClick }) {\n return (\n {\n fragmentInstance.addEventListener('click', handleClick);\n return () => fragmentInstance.removeEventListener('click', handleClick);\n }}>\n {children}\n \n );\n}\n"}]}],"\n",["$r","hr",null,{}],"\n",["$r","CanaryBadge",null,{}],"\n",["$r","p",null,{"children":["使用 Fragment 引用 ",{}," 跟踪可见性"]}],"\n",["$r","p",null,{"children":"¥Tracking visibility with Fragment refs "}],"\n",["$r","p",null,{"children":"Fragment 引用对于可见性跟踪和交叉点观察非常有用。这使你能够监控内容何时可见，而无需子组件公开引用："}],"\n",["$r","p",null,{"children":"¥Fragment refs are useful for visibility tracking and intersection observation. This enables you to monitor when content becomes visible without requiring the child Components to expose refs:"}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"{19,21,31-34}","children":"import { Fragment, useRef, useLayoutEffect } from 'react';\n\nfunction VisibilityObserverFragment({ threshold = 0.5, onVisibilityChange, children }) {\n const fragmentRef = useRef(null);\n\n useLayoutEffect(() => {\n const observer = new IntersectionObserver(\n (entries) => {\n onVisibilityChange(entries.some(entry => entry.isIntersecting))\n },\n { threshold }\n );\n \n fragmentRef.current.observeUsing(observer);\n return () => fragmentRef.current.unobserveUsing(observer);\n }, [threshold, onVisibilityChange]);\n\n return (\n \n {children}\n \n );\n}\n\nfunction MyComponent() {\n const handleVisibilityChange = (isVisible) => {\n console.log('Component is', isVisible ? 'visible' : 'hidden');\n };\n\n return (\n \n \n \n \n );\n}\n"}]}],"\n",["$r","p",null,{"children":"此模式是基于副作用的可见性日志记录的替代方案，后者在大多数情况下是一种反模式。仅依赖效果并不能保证渲染的组件可以被用户观察到。"}],"\n",["$r","p",null,{"children":"¥This pattern is an alternative to Effect-based visibility logging, which is an anti-pattern in most cases. Relying on Effects alone does not guarantee that the rendered Component is observable by the user."}],"\n",["$r","hr",null,{}],"\n",["$r","CanaryBadge",null,{}],"\n",["$r","p",null,{"children":["使用 Fragment 引用 ",{}," 进行焦点管理"]}],"\n",["$r","p",null,{"children":"¥Focus management with Fragment refs "}],"\n",["$r","p",null,{"children":"Fragment 引用提供适用于 Fragment 内所有 DOM 节点的焦点管理方法："}],"\n",["$r","p",null,{"children":"¥Fragment refs provide focus management methods that work across all DOM nodes within the Fragment:"}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"import { Fragment, useRef } from 'react';\n\nfunction FocusFragment({ children }) {\n return (\n fragmentInstance?.focus()}>\n {children}\n \n );\n}\n"}]}],"\n",["$r","p",null,{"children":[["$r","code",null,{"children":"focus()"}]," 方法聚焦于 Fragment 中第一个可聚焦元素，而 ",["$r","code",null,{"children":"focusLast()"}]," 方法聚焦于最后一个可聚焦元素。"]}],"\n",["$r","p",null,{"children":["¥The ",["$r","code",null,{"children":"focus()"}]," method focuses the first focusable element within the Fragment, while ",["$r","code",null,{"children":"focusLast()"}]," focuses the last focusable element."]}]]}]]