如何從功能組件中調用類組件

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組件層次結構分離。 它不需要直接獲取模態組件，因為它可以通過動作與其進行交互。