3

我有一个自定义模态组件：

export default ModalLoader = props=>{
  const {
    loading,
    ...attributes
  } = props;

  function closeModal(){
    console.log('Close Modal Kepanggil coyyy!!!!!!!')
  }

  return(
    <Modal
      transparent={true}
      animationType={'none'}
      visible={loading}
    >
      <View>
        <View>
          <ActivityIndicator
            size={'large'}
            color={colors.darkRed}
          />
          <CustomText style={{fontSize:24}}>Mohon Tunggu...</CustomText>
        </View>
      </View>
    </Modal>
  )
}

我想在中使用closeModal()，axios instance所以每次axios得到响应时，我都想关闭 axios 文件本身中的模态，而不是在我的所有组件中，

假设我的 axios 实例是这样的：

AxiosHttp.interceptors.response.use((res)=>{
  CustomLog(res.data, 'Interceptor')
  // call closeModal of ModalLoader
  ModalLoader.closeModal()
  return res.data;
},(err)=>{
  CustomLog(err, 'Interceptor Error')
  // call closeModal of ModalLoader
  ModalLoader.closeModal()
  return Promise.reject(err)
})

export default AxiosHttp

可以这样做吗？

4

2 回答 2

0

一种方法是使用React Context。

使用要用于关闭/切换模式的功能创建上下文提供程序。然后在 ModalLoader（或任何选择的组件）中使用该上下文中的函数。

./ModalContext.jsx

import React, { createContext } from 'react';

const ModalContext = createContext({
  closeModal: () => {
    console.log('Close Modal Kepanggil coyyy!!!!!!!');
  },
});

export default ModalContext;

随着 v16.8.0 中 react-hooks 的引入，您可以使用useContext hook在功能组件中使用上下文。

Axios 实例

import React, { useContext } from 'react';
import { ModalContext } from './ModalContext';

const modalContext = useContext(ModalContext);

AxiosHttp.interceptors.response.use((res)=>{
  CustomLog(res.data, 'Interceptor')
  // call closeModal in context
  modalContext.closeModal()
  return res.data;
},(err)=>{
  CustomLog(err, 'Interceptor Error')
  // call closeModal in context
  modalContext.closeModal()
  return Promise.reject(err)
})

export default AxiosHttp;

请参阅此处的工作示例：https ://codepen.io/studiospindle/pen/xxxMRow

在该示例中，有一个异步函数作为示例，它将在三秒后关闭模式窗口。这是为了模仿 Axios 的例子。还提供了一个带有按钮的示例。

于 2019-11-19T11:40:32.543 回答
0

@Remi 建议的使用反应上下文的简单示例

核心部分是ModalContext.js。它导出其他组件的上下文。如果您需要更常用的功能/道具，您可以编辑提供程序内部的状态。

如果你真的需要一个静态函数来做到这一点。你可能需要一个经理

class ModalInstanceManager {
  _defaultInstance = null;
  register(_ref) {
    if (!this._defaultInstance && "_id" in _ref) {
      this._defaultInstance = _ref;
    }
  }
  unregister(_ref) {
    if (!!this._defaultInstance && this._defaultInstance._id === _ref._id) {
      this._defaultInstance = null;
    }
  }
  getDefault() {
    return this._defaultInstance;
  }
}
export default new ModalInstanceManager();

在您的模态加载器中：

componentDidMount() {
      ModalInstanceManager.register(this);

  }

然后在你的静态函数中：

ModalLoader.open/close = ()=> {
      ModalInstanceManager.getDefault().open/close();
}
于 2019-11-20T04:27:23.470 回答