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