react 中 Fragment 占位符
在 react 脚手架创建的项目中 public 文件夹默认有一个 root
根节点,最后完成的代码都会放到 <div id="root"></div>
节点中,无论是在函数组件的 return
中还是类组件的 render()
中的 JSX 语法必须有一个标签包裹,使用 div 标签会在页面中正式的插入这个标签,可能会在某些情况下形成困扰,所以 react 提供另外一个占位符 Fragment
。使用时只需要包裹在 JSX 语法的最外层即可,记得先导入
使用
导入
import { Fragment } from 'react'
使用
function App() {
return (
<Fragment>
<h1>hello react</h1>
</Fragment>
);
}
export default App;
效果
再看看不使用 Fragment 的结构
不使用
function App() {
return (
<div>
<h1>hello react</h1>
</div>
);
}
export default App;
效果
会看到多了一层 div 标签