如何从功能组件中调用类组件

Question

在这里，我想显示一个请求窗口在axios拦截器响应中失败时的模式窗口（这是类组件）。 任何人都可以帮助我如何调用Modals类，而不是以下代码中的警报。

     //axios interceptor 
    import React, { Component}  from 'react';
    import axios from 'axios';
    import Modals  from '../components/modalAlerts/modalalerts';
    import ReactDOM from 'react-dom';
    import ShallowRenderer from 'react-test-renderer/shallow'
    import { Button, Card, CardBody, CardHeader, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
    const instance = axios.create({
        baseURL: '//some url here',
        timeout: 15000,
    });
    instance.defaults.headers.common['Authorization'] = //token;
    instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    instance.interceptors.request.use(function (config) {
        return config;
      }, function (error) {
        alert(error)
        console.log(error.response)
        return Promise.reject(error);
      });
    instance.interceptors.response.use(function (config) {
        return config;
      }, function (error) {
        console.log(error)
        if(error.response){
            if(error.response.status === 401||error.response.status === 403 ){
                console.log("401")
                localStorage.clear()
                window.location = '/#/login';
                alert(error.response.data.message)
            }else if(error.response.status === 404){
               alert(404);
            }else if(error.response.status === 400){
               alert(error.response.data.message)
            }else{
                alert("something went wrong. Please try after sometime..!")
            }
        }else{
            alert("server not found")
        }

        return Promise.reject(error);
      });
    export default instance;

这是我的模型类组件，我想从axios拦截器上方而不是警报中调用此模式。

     class Modals extends Component {
        constructor(props) {
            super(props);
            console.log(props)
            this.state = {
                modal: true,
            }    
            this.toggle = this.toggle.bind(this);
        }

        toggle() {
            this.setState({
                modal: !this.state.modal,
            });
        }
        render() {
            return (
                <div className="animated fadeIn">
                    <Row>
                        <Col>
                            <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
                                <ModalHeader toggle={this.toggle}>{this.props.apistatus == 1? "Success" : "Error"}</ModalHeader>
                                <ModalBody>
                                    {this.props.apistatus == 1? "Form updated successfully" : this.props.errormsg}
                                </ModalBody>
                                <ModalFooter>
                                    <Button color="primary" onClick={this.toggle}>OK</Button>{' '}
                                    {/* <Button color="secondary" onClick={this.toggle}>Cancel</Button> */}
                                </ModalFooter>
                            </Modal>       
                        </Col>
                    </Row>
                </div>
            );
        }
    }
    export default Modals;

Answer 1

这个问题与此类似。 有一个与React应用程序无关的Axios实例，因此它无法获取模式实例与之交互。 将其绑定到React组件实例将是一个错误，可能会导致其他问题，例如在测试中。 正确的方法是将Axios实例与特定的应用程序实例相关联，并为整个应用程序提供Axios实例。

常用的方法是深入传递道具，上下文API和全局状态管理（Redux，MobX）。

例如，Axios工厂功能接收模态组件实例来引用它：

function axiosFactory(modalRef) {
      const instance = ...;
      instance.interceptors.request.use(..., function (error) {
        const modalInstance = modalRef.current;
        modalInstance.toggle();
      });
      ...
    }

const AxiosContext = React.createContext();

class App extends Component {
  modalRef = React.createRef();

  render() {
    return <>
      <Modal ref={this.modalRef}/>
      <AxiosContext.Provider value={axiosFactory(this.modalRef)}>
        ...the rest of the app that depends on Axios...
      </AxiosContext.Provider>
    </>;
  }
}

可以在子组件中检索Axios实例：

 <AxiosContext.Consumer>{axios => (
   <ComponentThatNeedsToGetAxiosAsProp axios={axios} />
 )</AxiosContext.Consumer>

可重用性可以与惯用的配方来提高反应，例如withAxios高次成分，使得使用的<AxiosContext.Consumer>如上所示。

在Redux的情况下，这可能甚至更简单，因为Axios实例可以在Redux存储中变得可用，并且可以与React组件层次结构分离。 它不需要直接获取模态组件，因为它可以通过动作与其进行交互。