http://www.css88.com/react/do...看完官網(wǎng)文檔,大概知道高階組件怎么封裝了。大概知道高階組件怎么封裝了。當(dāng)前的需求是怎么獲取WrappedPage的state?(我們是混合開(kāi)發(fā),需要更新header和右上角的圖標(biāo)!希望在統(tǒng)一的地方處理header和右上角功能;而不是每個(gè)頁(yè)面都去添加重復(fù)代碼。)//basicimportReactfrom'react';importPropTypesfrom'prop-types';//modulesimportupfrom'../modules/cup';//WrappedPage每一個(gè)jsx路由頁(yè)面exportdefaultfunctionmixinsPage(WrappedPage){//……返回另一個(gè)新組件……returnclassPageextendsReact.Component{constructor(props){super(props);}componentWillMount(){console.log(WrappedPage);//清除頁(yè)面右上角的圖標(biāo)up.plugins.setRightButton();}componentDidMount(){console.log(`created=>${this.state.badTitle}`);//設(shè)置titledocument.title=this.state.badTitle;up.plugins.setPageTitle(this.state.badTitle||'');//ios初始化''時(shí)無(wú)效}render(){//……使用最新的數(shù)據(jù)渲染組件//注意此處將已有的props屬性傳遞給原組件return;}}}采用反向繼承模式:可以操作state但是會(huì)導(dǎo)致WrappedPage的componentWillMount和componentWillMount不執(zhí)行了。。。。exportdefaultfunctionmixinsPage(WrappedPage){//……返回另一個(gè)新組件……returnclassPageextendsWrappedPage{constructor(props){super(props);}componentWillMount(){//清除頁(yè)面右上角的圖標(biāo)up.plugins.setRightButton();}componentDidMount(){//設(shè)置titledocument.title=this.state.badTitle;up.plugins.setPageTitle(this.state.badTitle||'');//ios初始化''時(shí)無(wú)效}shouldComponentUpdate(nextProps,nextState){console.log(nextState);}render(){//……使用最新的數(shù)據(jù)渲染組件//注意此處將已有的props屬性傳遞給原組件//return;//使用反向繼承模式:可以操作statereturnsuper.render()}}}以前vueJs的統(tǒng)一處理邏輯!//vueJs的mixinsbeforeCreate(){//清除頁(yè)面右上角的圖標(biāo)plugins.setRightButton();},created(){//log.clearLogs();console.log(`created=>${this.badTitle}`);//設(shè)置titledocument.title=this.badTitle;plugins.setPageTitle(this.badTitle||'');//ios初始化''時(shí)無(wú)效},
react 高階組件 怎么獲取子組件的state?
開(kāi)心每一天1111
2019-05-13 11:04:36