正文

使用React.Fragment替代render函数中div的包裹

IP云
IP云V管理员/4 阅读
08/22
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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 啦