Как вызвать компонент класса из функционального компонента - PullRequest
Новая
       26

Как вызвать компонент класса из функционального компонента

0 голосов
/ 04 октября 2018

Здесь я хочу показать модальное окно (которое является компонентом класса) при сбое запроса в ответе перехватчика 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;

1 Ответ

0 голосов
/ 04 октября 2018

Эта проблема похожа на эту .Существует экземпляр Axios, который не связан с приложением React, поэтому он не может заставить модальный экземпляр взаимодействовать с ним.Связывание его с экземплярами компонентов 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>

Возможность многократного использования может быть улучшена с помощью идиоматического Reactрецепты, например withAxios компонент высшего порядка, использующий <AxiosContext.Consumer>, как показано выше.

В случае Redux это может быть еще проще, поскольку экземпляр Axios может стать доступным в хранилище Redux и отделиться от Reactиерархия компонентов.Ему не нужно напрямую получать модальный компонент, потому что он может взаимодействовать с ним с помощью действий.

...