无论做什么,都请记得那是为自己而做,那就毫无怨言。不刻意的装饰自己,那些都是给别人看的,而真的在乎我的人不会在乎这些。
使用
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 占位组件的资料请关注其它相关文章!