React 中的 Fragment 标签

介绍

React.Fragment组件能够在不额外创建 DOM 元素的情况下，让 render()方法中返回多个元素。

使用

代替div作为最外层，可做不可见的包裹元素。主要的作用就是避免了多层嵌套的div标签。

import react, { Component, Fragment } from 'react'
...
render() {
return (
<Fragment>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</Fragment>
)
}

上面这段代码等价于：

import react, { Component, Fragment } from 'react'
...
render() {
return (
<>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</>
)
}

注意

<Fragment>标签和<>标签的区别之处就是：
<>不能接受键值或属性，但是<Fragment>可以。可以用在遍历循环渲染元素的时候。

function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// 没有`key`，React 会发出一个关键警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}

key 是唯一可以传递给 Fragment 的属性。未来可能会添加对其他属性的支持，例如事件。

注意：简写形式<></>，但目前有些前端工具支持的还不太好，用 create-react-app 创建的项目可能就不能通过编译。所以遇到这种情况很正常。

最后

以上就是伶俐金针菇为你收集整理的React 中的 Fragment 标签React 中的 Fragment 标签的全部内容，希望文章能够帮你解决React 中的 Fragment 标签React 中的 Fragment 标签所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。