快捷導(dǎo)航

Fragment 占位組件不生成標(biāo)簽與路由組件lazyLoad案例

更新時間：2022年10月08日 10:25:48 作者：河北小寶

這篇文章主要為大家介紹了Fragment 占位組件不生成標(biāo)簽與路由組件lazyLoad案例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

使用

Fragment表示占位組件并不會生成一個標(biāo)簽幫助解決了報錯問題其他什么都不會生成

<Fragment><Fragment>
<></>

兩者的區(qū)別是 Fragment 能接收參數(shù) key 可用于循環(huán)遍歷 <> 內(nèi)不能包含任何參數(shù)

作用

可以不用必須有一個真實的DOM根標(biāo)簽了

案例

import React, {
    Component, Fragment
} from 'react';
// Fragment表示占位組件 并不會生成一個標(biāo)簽 幫助解決了報錯問題 其他什么都不會生成
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函數(shù)配合import()函數(shù)動態(tài)加載路由組件 ===> 路由組件代碼會被分開打包
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 占位組件不生成標(biāo)簽與路由組件lazyLoad案例的詳細(xì)內(nèi)容，更多關(guān)于Fragment 占位組件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: