react高阶组件应用

[chenchenyuyu]

const WithErrorHandler = (WrappedComponent) => {
  class ErrorHandler extends React.Component {
    constructor() {
      super()
      this.state = {
        hasError: false,
      }
    }

    componentDidCatch(error, info) {
      let { message, stack } = error;

      // Processing error
      let resourceUrl, col, line;
      let errs = stack.match(/\(.+?\)/);
      if (errs && errs.length) errs = errs[0];
      errs = errs.replace(/\w.+js/g, $1 => { resourceUrl = $1; return ''; });
      errs = errs.split(':');
      if (errs && errs.length > 1)
        line = parseInt(errs[1] || 0);
      col = parseInt(errs[2] || 0);

      this.setState({
        hasError: true,
      }, () => {
        console.log('TODO组件渲染异常上报=>', error, info.componentStack);
        window.logger.error({
          action: '组件渲染',
          ErrorMessage: message,
          ErrorLineNo: line,
          ErrorColNo: col,
          ErrorUrl: resourceUrl,
          ErrorStack: info.componentStack
        });
      }
      );
      // errorCallback(error, info, this.props);
    }

    componentWillUnmount() {
      this.setState = (state, callback) => {
        return
      }
    }

    render() {
      console.log('渲染组件props', this.props)
      // if (this.state.hasError) {
      //   // 处理异常上报组件
      //   return <h1>wrong</h1>
      // }
      return <WrappedComponent {...this.props} />
    }
  }
  return ErrorHandler;
}

export default WithErrorHandler;