react <>空标签原来是这样用的
- 前端
- 三生万物
- 0
在react中，因为节点渲染是可以放到函数中去处理的，在 return 出去的时候，需要注意一点的是只能存在一个根标签，这样而来，就衍生出一个问题，根标签放什么元素? 有时候有的标签中间是不能插入 div 标签的，比如下面的例子：
import {Component} from "react";
class App extends Component {
state = {
name: 'tom',
date: '2022-04-21',
dept: '研发部'
}
tableData() {
return (
<>
<td> {this.state.name} </td>
<td> {this.state.date} </td>
<td> {this.state.dept} </td>
</>
)
}
render() {
return (
<table>
<thead>
</thead>
<tbody>
<tr>
{this.tableData()}
</tr>
</tbody>
</table>
)
}
}
export default App;
在 tableData 函数中，里面穿插的是表格中的数据，因此这种情况下就不能使用 div 去包裹 td 元素了，这种情况下就需要使用 <></> 空标签元素
<></>是 <React.Fragment></React.Fragment> 的语法糖，它主要用于不需要一个实体的父元素或者是根元素去包裹的情况，其次 React.Fragment 可以有个 key 属性
免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。
