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

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>
  )
}

我想在axios实例中使用closeModal()，所以每次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 的例子。还提供了一个带有按钮的示例。