目录概述动机短语法带key 的Fragments概述 可以将子列表分组,而无需向DOM添加额外节点简单理解:空标签<React.Fragment></React.F
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
)
}
//table.js
const Table = () => {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
)
}
}
//columns.js
const Columns = () => {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
)
}
}
//以上代码输出:
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
//此时 td 是失效的,可以使用Fragemengt解决这个问题
//用法:
//columns.js
const Columns = () => {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
)
}
}
//通过上面的方法我们就可以正确的输出table啦:
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
const Cloumns = () => {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
)
}
}
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>
)
}
到此这篇关于React浅析Fragments使用方法的文章就介绍到这了,更多相关React Fragments内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: React浅析Fragments使用方法
本文链接: https://www.lsjlt.com/news/173999.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0