React里的Fragment标签的具体使用
作者：慢谷
本文主要介绍了React里的Fragment标签的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
react return里返回多个元素值要有父标签包裹。
React.Fragment组件能够在不额外创建 DOM 元素的情况下，让 render()方法中返回多个元素。相当于空标签<></>。
<></>包裹多个元素↓：
import React, { Component, Fragment } from "react";
import "./App.css";
class App extends Component {
render() {
return (
<>
<div>
<input />
<button>按钮</button>
</div>
<ul>
<li>哈</li>
<li>咯</li>
</ul>
</>
);
}
}
export default App;
使用Fragment标签↓：
和<></>实现效果一致。
import React, { Component, Fragment } from "react";
import "./App.css";
class App extends Component {
render() {
return (
<Fragment>
<div>
<input />
<button>按钮</button>
</div>
<ul>
<li>哈</li>
<li>咯</li>
</ul>
</Fragment>
);
}
}
export default App;<React.Fragment>就不用在头部引入了↓：
import React, { Component } from "react";
import "./App.css";
class App extends Component {
render() {
return (
<React.Fragment>
<div>
<input />
<button>按钮</button>
</div>
<ul>
<li>哈</li>
<li>咯</li>
</ul>
</React.Fragment>
);
}
}
export default App;使用<div>包裹多个标签就会多一层嵌套↓：
import React, { Component, Fragment } from "react";
import "./App.css";
class App extends Component {
render() {
return (
<div>
<div>
<input />
<button>按钮</button>
</div>
<ul>
<li>哈</li>
<li>咯</li>
</ul>
</div>
);
}
}
export default App;<></>和Fragment标签的区别
Fragment标签支持能接受键值或属性，可以遍历循环渲染元素
import React, { Component } from "react";
import "./App.css";
const list = [
{ id: 0, name: "凤凰火", description: "最肉" },
{ id: 1, name: "彼岸花", description: "花花" },
];
class App extends Component {
render() {
return list.map((item) => (
<React.Fragment key={item.id}>
<li>
{item.name}是{item.description}
</li>
</React.Fragment>
));
}
}
export default App;
到此这篇关于React里的Fragment标签的具体使用的文章就介绍到这了,更多相关React Fragment标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！