react 高阶组件 怎么获取子组件的state?

Question

http://www.css88.com/react/do...
看完官网文档，大概知道高阶组件怎么封装了。大概知道高阶组件怎么封装了。
当前的需求是怎么获取WrappedPage的state?
(我们是混合开发，需要更新header和右上角的图标！希望在统一的地方处理header和右上角功能；而不是每个页面都去添加重复代码。)
//basic
importReactfrom'react';
importPropTypesfrom'prop-types';
//modules
importupfrom'../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}`);
//设置title
document.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(){
//设置title
document.title=this.state.badTitle;
up.plugins.setPageTitle(this.state.badTitle||'');//ios初始化''时无效
}
shouldComponentUpdate(nextProps,nextState){
console.log(nextState);
}
render(){
//……使用最新的数据渲染组件
//注意此处将已有的props属性传递给原组件
//return;
//使用反向继承模式：可以操作state
returnsuper.render()
}
}
}
以前vueJs的统一处理逻辑！
//vueJs的mixins
beforeCreate(){
//清除页面右上角的图标
plugins.setRightButton();
},
created(){
//log.clearLogs();
console.log(`created=>${this.badTitle}`);
//设置title
document.title=this.badTitle;
plugins.setPageTitle(this.badTitle||'');//ios初始化''时无效
},

Answer 1

谢邀，使用ref即可。不懂可以翻阅文档。//basicimportReactfrom'react';importPropTypesfrom'prop-types';//modulesimportupfrom'../modules/cup';//WrappedPage每一个jsx路由页面exportdefaultfunctionmixinsPage(WrappedPage){//……返回另一个新组件……returnclassPageextendsReact.Component{constructor(props){super(props);+this.WrappedPageRef=React.createRef()}componentWillMount(){console.log(WrappedPage);//清除页面右上角的图标up.plugins.setRightButton();}componentDidMount(){-console.log(`created=>${this.state.badTitle}`);//设置title-document.title=this.state.badTitle;-up.plugins.setPageTitle(this.state.badTitle||'');//ios初始化''时无效+if(this.WrappedPageRef.current){+const{badTitle}=this.WrappedPageRef.current.state+console.log(`created=>${badTitle}`);+document.title=badTitle;+up.plugins.setPageTitle(badTitle||'');//ios初始化''时无效+}}render(){//……使用最新的数据渲染组件//注意此处将已有的props属性传递给原组件-return;+return;}}}

Answer 2

考虑下ref,this.refs.wrappedPage.state这个就是WrappedPage的state//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;}}}