<Fragment>
,通常使用 <>...</>
语法,允许您在不使用包装节点的情况下对元素进行分组。
<>
<OneChild />
<AnotherChild />
</>
参考
<Fragment>
将元素包裹在 <Fragment>
中,以便在需要单个元素的情况下将它们分组在一起。在 Fragment
中对元素进行分组不会影响最终生成的 DOM;这与不对元素进行分组的效果相同。空 JSX 标签 <></>
在大多数情况下是 <Fragment></Fragment>
的简写。
属性
- 可选
key
:使用显式<Fragment>
语法声明的 Fragment 可以有 键。
注意事项
-
如果要将
key
传递给 Fragment,则不能使用<>...</>
语法。您必须显式地从'react'
中导入Fragment
并渲染<Fragment key={yourKey}>...</Fragment>
。 -
当您从渲染
<><Child /></>
到[<Child />]
或反向渲染时,或者从渲染<><Child /></>
到<Child />
或反向渲染时,React 不会 重置状态。这只在单层深度上有效:例如,从<><><Child /></></>
到<Child />
会重置状态。请参阅 此处 的精确语义。
用法
返回多个元素
使用 Fragment
,或者等效的 <>...</>
语法,将多个元素组合在一起。您可以在任何可以放置单个元素的地方使用它来放置多个元素。例如,一个组件只能返回一个元素,但是通过使用 Fragment,您可以将多个元素组合在一起,然后将它们作为一个组返回
function Post() {
return (
<>
<PostTitle />
<PostBody />
</>
);
}
Fragments 很有用,因为与将元素包装在另一个容器(如 DOM 元素)中不同,使用 Fragment 对元素进行分组不会影响布局或样式。如果您使用浏览器工具检查此示例,您将看到所有 <h1>
和 <article>
DOM 节点都显示为兄弟节点,周围没有包装器
export default function Blog() { return ( <> <Post title="An update" body="It's been a while since I posted..." /> <Post title="My new blog" body="I am starting a new blog!" /> </> ) } function Post({ title, body }) { return ( <> <PostTitle title={title} /> <PostBody body={body} /> </> ); } function PostTitle({ title }) { return <h1>{title}</h1> } function PostBody({ body }) { return ( <article> <p>{body}</p> </article> ); }
深入探讨
上面的示例等效于从 React 导入 Fragment
import { Fragment } from 'react';
function Post() {
return (
<Fragment>
<PostTitle />
<PostBody />
</Fragment>
);
}
通常,您不需要这样做,除非您需要 将 key
传递给您的 Fragment
。
将多个元素分配给变量
与任何其他元素一样,您可以将 Fragment 元素分配给变量,将它们作为属性传递,等等
function CloseDialog() {
const buttons = (
<>
<OKButton />
<CancelButton />
</>
);
return (
<AlertDialog buttons={buttons}>
Are you sure you want to leave this page?
</AlertDialog>
);
}
将元素与文本分组
您可以使用 Fragment
将文本与组件组合在一起
function DateRangePicker({ start, end }) {
return (
<>
From
<DatePicker date={start} />
to
<DatePicker date={end} />
</>
);
}
渲染 Fragment 列表
在某些情况下,您需要显式编写 Fragment
,而不是使用 <></>
语法。当您 在循环中渲染多个元素 时,您需要为每个元素分配一个 key
。如果循环中的元素是 Fragment,则需要使用普通的 JSX 元素语法才能提供 key
属性
function Blog() {
return posts.map(post =>
<Fragment key={post.id}>
<PostTitle title={post.title} />
<PostBody body={post.body} />
</Fragment>
);
}
您可以检查 DOM 以验证 Fragment 子元素周围没有包装元素
import { Fragment } from 'react'; const posts = [ { id: 1, title: 'An update', body: "It's been a while since I posted..." }, { id: 2, title: 'My new blog', body: 'I am starting a new blog!' } ]; export default function Blog() { return posts.map(post => <Fragment key={post.id}> <PostTitle title={post.title} /> <PostBody body={post.body} /> </Fragment> ); } function PostTitle({ title }) { return <h1>{title}</h1> } function PostBody({ body }) { return ( <article> <p>{body}</p> </article> ); }