問(wèn)題

今天在寫(xiě)頁(yè)面的時(shí)候發(fā)現(xiàn)一個(gè)問(wèn)題，就是在React Router中使用了Url傳參的功能，像這樣:

export class MainRouter extends React.Component {
 render() {
 return (
 <BrowserRouter>
 <Switch>
 ...
 <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/>
 ...
 </Switch>
 </BrowserRouter>
 );
 }
}

按照官方文檔的說(shuō)法，可以在ChannelPerPage這個(gè)組件中使用

this.props.match.params

來(lái)獲取url參數(shù)的值，但是我發(fā)現(xiàn)如果你在這個(gè)url下只將url中的參數(shù)部分改變，比如channelId從1變成2的時(shí)候，頁(yè)面并不會(huì)刷新。

解決辦法

查閱資料后發(fā)現(xiàn)這樣的根本原因是props的改變并不會(huì)引起組件的重新渲染，只有state的變化才會(huì)引起組件的重新渲染，而url參數(shù)屬于props，故改變url參數(shù)并不會(huì)引起組件的重新渲染。

后來(lái)發(fā)現(xiàn)React的組件中有一個(gè)可復(fù)寫(xiě)的方法

componentWillReceiveProps(nextProps) {
 ...
}

這個(gè)方法可以在React組件中被復(fù)寫(xiě)，這個(gè)方法將會(huì)在props改變的時(shí)候被調(diào)用，所以你可以使用這個(gè)方法將nextProps獲取到，并且在這個(gè)方法里面修改state的內(nèi)容，這樣就可以讓組件重新被渲染。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

JS callback回調(diào)函數(shù)使用案例詳解

JS DOM元素常見(jiàn)增刪改查操作詳解

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com