使用React.Fragment替代render函数中div的包裹
使用React.Fragment替代render函数中div的包裹
Leophen
发布于 2019-08-23 15:34:59
发布于 2019-08-23 15:34:59
1、在 React 中，render 函数中 return 的内容只能有一个根节点，如果多个元素嵌套，需要用一个标签元素包裹
这个包裹的标签通常用 div，示例如下：
class App extends Component {
render() {
return (
<div>
<h1>大标题</h1>
<h2>小标题</h2>
</div>
);
}
}此时 #root 下的结构：
2、如果不加 div，会报错
示例如下：
class App extends Component {
render() {
return (
<h1>大标题</h1>
<h2>小标题</h2>
);
}
}
3、不加 div 的解决办法：用 React.Fragment 替代
示例如下：
class App extends Component {
render() {
return (
<React.Fragment>
<h1>大标题</h1>
<h2>小标题</h2>
</React.Fragment>
);
}
}此时 #root 下的结构就不会多出一个“烦人”的 div 啦
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录