react 高階組件怎么獲取子組件的state?

http://www.css88.com/react/do...

看完官網(wǎng)文檔，大概知道高階組件怎么封裝了。大概知道高階組件怎么封裝了。

當前的需求是怎么獲取 WrappedPage 的 state?

(我們是混合開發(fā)，需要更新header和右上角的圖標！希望在統(tǒng)一的地方處理header 和右上角功能；而不是每個頁面都去添加重復(fù)代碼。)

//basic
import React from 'react';
import PropTypes from 'prop-types';


//modules
import up from '../modules/cup';

//WrappedPage 每一個jsx路由頁面
export default function mixinsPage(WrappedPage) {
  // ……返回另一個新組件……
  return class Page extends React.Component {
    constructor(props) {
      super(props);
    }

    componentWillMount() {
      console.log(WrappedPage);
       //清除頁面右上角的圖標
       up.plugins.setRightButton();
    }

    componentDidMount() {
        console.log(`created=>${this.state.badTitle}`);
        //設(shè)置title
        document.title = this.state.badTitle;
        up.plugins.setPageTitle(this.state.badTitle || ' ');//ios 初始化 '' 時 無效
    }

    render() {
      // ……使用最新的數(shù)據(jù)渲染組件
      // 注意此處將已有的props屬性傳遞給原組件
      return <WrappedPage {...this.props} />;
    }
  }
}

采用反向繼承模式：可以操作state 但是會導(dǎo)致WrappedPage的componentWillMount 和 componentWillMount 不執(zhí)行了。。。。

export default function mixinsPage(WrappedPage) {
  // ……返回另一個新組件……
  return class Page extends WrappedPage {
    constructor(props) {
      super(props);
    }

    componentWillMount() {
      //清除頁面右上角的圖標
       up.plugins.setRightButton();
    }

    componentDidMount() {
   
       //設(shè)置title
       document.title = this.state.badTitle;
       up.plugins.setPageTitle(this.state.badTitle || ' ');//ios 初始化 '' 時 無效
    }

    shouldComponentUpdate(nextProps, nextState) {
      console.log(nextState);
    }

    render() {
      // ……使用最新的數(shù)據(jù)渲染組件
      // 注意此處將已有的props屬性傳遞給原組件
      // return <WrappedPage {...this.props} />;
      //使用反向繼承 模式 ：可以操作state
      return super.render()
    }

  }
}

以前vueJs 的統(tǒng)一處理邏輯！

//vueJs 的mixins 
beforeCreate() {
    //清除頁面右上角的圖標
    plugins.setRightButton();
  },
  created() {
    // log.clearLogs();

    console.log(`created=>${this.badTitle}`);
    //設(shè)置title
    document.title = this.badTitle;
    plugins.setPageTitle(this.badTitle || ' ');//ios 初始化 '' 時 無效
  },

回答

編輯回答

綰青絲

事件機制了解一下

比如：onfire.js

2017年2月13日 16:29

編輯回答

舊言

包裹組件和傳入進去處理的組件不是同一個組件。state是組件本身的，props是流動的。回到問題，可以把state映射到props上去，就像connect處理的事情一樣

2017年1月5日 02:46

編輯回答

避風(fēng)港

考慮下ref, this.refs.wrappedPage.state這個就是WrappedPage的state

//basic
import React from 'react';
import PropTypes from 'prop-types';


//modules
import up from '../modules/cup';

//WrappedPage 每一個jsx路由頁面
export default function mixinsPage(WrappedPage) {
  // ……返回另一個新組件……
  return class Page extends React.Component {
    constructor(props) {
      super(props);
    }

    componentWillMount() {
      console.log(WrappedPage);
       //清除頁面右上角的圖標
       up.plugins.setRightButton();
    }

    componentDidMount() {
        console.log(`created=>${this.state.badTitle}`);
        //設(shè)置title
        document.title = this.state.badTitle;
        up.plugins.setPageTitle(this.state.badTitle || ' ');//ios 初始化 '' 時 無效
    }

    render() {
      // ……使用最新的數(shù)據(jù)渲染組件
      // 注意此處將已有的props屬性傳遞給原組件
      return <WrappedPage ref="wrappedPage" {...this.props} />;
    }
  }
}

2017年11月1日 22:25

編輯回答

初念

謝邀，使用 ref 即可。不懂可以翻閱文檔。

//basic
import React from 'react';
import PropTypes from 'prop-types';


//modules
import up from '../modules/cup';

//WrappedPage 每一個jsx路由頁面
export default function mixinsPage(WrappedPage) {
  // ……返回另一個新組件……
  return class Page extends React.Component {
    constructor(props) {
      super(props);
+     this.WrappedPageRef = React.createRef()
    }

    componentWillMount() {
      console.log(WrappedPage);
       //清除頁面右上角的圖標
       up.plugins.setRightButton();
    }

    componentDidMount() {
-       console.log(`created=>${this.state.badTitle}`);
        //設(shè)置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() {
      // ……使用最新的數(shù)據(jù)渲染組件
      // 注意此處將已有的props屬性傳遞給原組件
-      return <WrappedPage {...this.props} />;
+      return <WrappedPage {...this.props} ref={this.WrappedPageRef} />;
    }
  }
}

2018年5月20日 02:40