如何将React.Componment作为服务使用

遇到的问题:

在NextJs中,当通过Axios请求数据时,如何监听并提供一个方法,在请求是显示loading组件,请求结束后若有错误,则弹窗 Error -Toast

解决思路:

在App.js中增加(或追加一个<div />)=>对该<div />追加相应的展示组件=>通过show:boolean=false控制其展示和隐藏,在Axios请求数据时,通过拦截,执行该组件的Start=>show=true,请求结束后,执行该组件的Stop=>show=false

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import './progress.less'
let defaultState = {show:false}
class Progress extends Component {
  constructor(props, context){
        super(props, context)
        this.state = {...defaultState}
    }
  start(){ // 开始显示
    this.setState({
      show:true
    })
  }
  done(){ // 结束隐藏
    this.setState({
      show:false
    })
  }
  render(){
    return (
      <div className="myprogress" style={this.state.show? {display:'block'}:{display:'none'}}>
        <div className="bar">
          <div className="peg"></div>
        </div>
        <div className="spinner">
          <div className="spinner-icon"></div>
        </div>
      </div>
      )
  }
}
// 创建元素追加到body
let div = document.createElement('div');
let props = {
};
document.body.appendChild(div);
 
let Box = ReactDOM.render(React.createElement(
  Progress,
  props
),div);
export default Box;

import axios from 'axios'
import MProgress from '@/components/progress'
// 设置超时时间
axios.defaults.timeout = 10000
axios.interceptors.request.use(config=>{ // 请求之前加loading
  MProgress.start();
  return config
},error=>{
  return Promise.reject(error)
})
axios.interceptors.response.use(config=>{ // 响应成功关闭loading
  MProgress.done();
  return config
},error=>{
  return Promise.reject(error)
})
export default axios;

然后发现了个问题

document is not defined

document是浏览器客户端的东西,NextJs服务器渲染根本不认识

一度造成尴尬局面

//先判断是否为客户端环境

var canUseDom = !!(typeof window !== 'undefined' && window.document && window.document.createElement);


if (lazy && canUseDom) {
      containerDomNode = document.createElement('div');
      document.body.appendChild(containerDomNode);
      render(React.createElement(ToastContainer, containerConfig), containerDomNode);
    }

只有当能读取window&document的时候,在继续插入(document.createElement('div'))来避免服务器报错