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

Question

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初始化''时无效},

Answer 1

谢邀，使用ref即可。不懂可以翻阅文档。
//basic
importReactfrom'react';
importPropTypesfrom'prop-types';
//modules
importupfrom'../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
//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;
}
}
}