Question

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

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

有可能这样做吗？

Answer 1

一种方法是使用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示例。还提供了带有按钮的示例。

Answer 2

一个简单的example，如@Remi建议的那样使用react上下文

核心部分为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();

在您的ModalLoader中：

componentDidMount() {
      ModalInstanceManager.register(this);

  }

然后在您的静态函数中：

ModalLoader.open/close = ()=> {
      ModalInstanceManager.getDefault().open/close();
}

React Native-在功能组件中创建方法并在组件外部调用此方法，可能吗？

2 个答案: