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>
)
}
}
上一篇: 每天定时任务执行