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标签内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
