欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React的一些小API(路由懒加载,setState的参数类型)

程序员文章站 2022-05-14 15:54:28
...
import React, { Component, setState, lazy, Suspense } from 'react'
import { Route, Link } from 'react-router-dom'

/**
 * setState可以传递一个对象也可以传递一个函数一个参数如果传递函数会上接受两个参数一个state,props
 * 函数的方式默认会返回更新以后的state数值
 * 路由的懒加载
 */
// export default class App extends Component {
//   state={count:0}
//   handle=()=>{
//     this.setState(state=>state.count+=10)
//   }
//   render() {

//     return (
//       <div>
// {this.state.count}
//         <button onClick={this.handle}>增加</button>
//       </div>
//     )
//   }
// }


/**
 * 直接出现的错误
 * Error: A React component suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
解决办法
 * 定义懒路由
 */
const Home = lazy(() => import('./list/index'))
export default class App extends Component {
  render() {
    return (
      <div>
        <Link to='/list'>list</Link>
        <Suspense fallback={<h1>....</h1>}>        <Route path="/list" component={Home}>
        </Route></Suspense>

      </div>
    )
  }
}

 

相关标签: 亲测:真的可用