Fragment的替代词是什么？

本文共计623个文字，预计阅读时间需要3分钟。

目录+使用+作用+案例+路径组件的lazyLoad+案例+使用+Fragment表示占位组件+不会生成一个标签+帮助解决报错问题+其他都不会生成+FragmentFragment+/+两者的区别是+Fragment+能接收参数+k

目录

• 使用
• 作用
• 案例
• 路由组件的lazyLoad
• 案例

使用

Fragment表示占位组件 并不会生成一个标签 帮助解决了报错问题 其他什么都不会生成

<Fragment><Fragment> <></>

两者的区别是 Fragment 能接收参数 key 可用于循环遍历 <> 内不能包含任何参数

作用

可以不用必须有一个真实的DOM根标签了

案例

import React, { Component, Fragment } from 'react'; // Fragment表示占位组件 并不会生成一个标签 帮助解决了报错问题 其他什么都不会生成 class Text extends Component { render() { return ( <Fragment> <input/> <ul> <li>Learn More</li> <li>Learn React</li> </ul> </Fragment> ); } } export default Text;

路由组件的lazyLoad

//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包 const Login = lazy(()=>import('@/pages/Login')) //2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面 <Suspense fallback={<h1>loading.....</h1>}> <Switch> <Route path="/xxx" component={Xxxx}/> <Redirect to="/login"/> </Switch> </Suspense>

import React, { Component,lazy,Suspense } from 'react' import { NavLink,Route } from 'react-router-dom' // import Home from './Home' // import About from './About' import Loading from './Loading' const About = lazy(() => import("./About")) const Home = lazy(() => import("./Home")) export default class Demo extends Component { render() { return ( <div> <div className="row"> </div> <div className="row"> <div className="col-xs-2 col-xs-offset-2"> <div className="list-group"> <NavLink activeClassName="atguigu" className="list-group-item" to="/about">About</NavLink> <NavLink activeClassName="atguigu" className="list-group-item" to="/home">Home</NavLink> </div> </div> <div className="col-xs-6"> <div className="panel"> <div className="panel-body"> <Suspense fallback={<Loading/>}> {/* 注册路由 */} <Route path="/about" component={About} /> <Route path="/home" component={Home} /> </Suspense> </div> </div> </div> </div> </div> ) } }

以上就是Fragment 占位组件不生成标签与路由组件lazyLoad案例的详细内容，更多关于Fragment 占位组件的资料请关注易盾网络其它相关文章！