componentWillReceiveProps

最新推荐文章于 2023-04-20 12:35:17 发布

5649498

最新推荐文章于 2023-04-20 12:35:17 发布

阅读量3.2k

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_35772366/article/details/79572600

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这是react组件中的一个勾子
小示例

    //注释1.props被改变时调用
    //注释2.通过路由被匹配此组件时调用，so
    //在index组件通过不同/index/${path}来对应到这个list组件
    //list组件会根据path来调用不同的数据
    //修改自身的state
    componentWillReceiveProps(nextProps){
        let path=nextProps.location.pathname.split("/")
        let tab=path[path.length-1]
        //切换了贴子类型        对应 注释2
        if(tab!==this.state.tab){
            this.setState({
                tab,
                page:1
            })
            this.updata(tab,1)
            return
        }
        //切换页码            对应 注释1
        this.setState({
            loading:nextProps.loading,
            data:nextProps.data
        })
    }

路由组件怎么定义的呢

<Switch>
    <Route path="/index" exact render={()=>(<Redirect to="/index/all"/>)}/>
    <Route path="/index/all" component={IndexList}/>
    <Route path="/index/ask" component={IndexList}/>
    <Route path="/index/share" component={IndexList}/>
    <Route path="/index/job" component={IndexList}/>
    <Route path="/index/dev" component={IndexList}/>
    <Route path="/index/good" component={IndexList}/>
</Switch>