withRouter
withRouter 是组件的装饰器(HoC,高阶组件),可以给业务组件的 props 中注入 router 对象进而控制路由跳转,用法与 redux 的 connect 相同,如:
const App = () => <div>hello</div>
// 普通装饰方式
export default withRouter(App)
// 类装饰方式
@withRouter
class App extends Component {}
如果 withRef 设置为 true,装饰后的组件可以通过 getWrappedInstance
方法获得低阶组件的 ref
如果 lifecycle 设置为 true,被装饰的组件将获得四个生命周期:
inited
:对应 hy 的 getInitData 方法,获取参数内容为:{ type: 'push', payload: data }actived
:对应 hy 的 onShow 方法,获取参数内容为:{ type: 'show' }received
:对应 hy 的 onReceiveData 方法,获取参数内容为:{ type: 'pop', payload: data }deactived
:对应 hy 的 onHide 方法; 这四个生命周期在单页和 Hy 下的对应完全相同,在多页场景下仅拥有 inited、actived 和 received 方法(因为多页的页面会被销毁,因此不推荐使用 deactived)。
class Hello extends Component {
constructor(props) {
super(props)
this.state = { list: [] }
}
actived(data) {
console.log(`actived ` + data.type)
}
deactived() {
console.log(`deactived`)
}
render() {
return <div>hello</div>
}
}
class H = withRouter(Hello, { lifecycle: true })
<Route path="/hello" component={H} />
方法
withRouter
方法参数:
参数名 | 类型 | 描述 | 必选 | 支持版本 |
---|---|---|---|---|
WrappedComponent | Component | 被装饰的组件 | ||
options | object | 选项,可配置 withRef 与 lifecycle |