format占位符（Fragment占位组件不生成标签与路由组件lazyLoad案例）
导读：使用 Fragment表示占位组件 并不会生成一个标签 帮助解决了报错问题 其他什么都不会生成...
使用
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 占位组件的资料请关注本站其它相关文章！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！