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

Posted 2023-03-16

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

【英文标题】：React Native - Create method in functional component and call this method outside of the component, possible?

【发布时间】：2020-03-14 13:21:22

【问题描述】：

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

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 instance 中使用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

有可能吗？

【问题讨论】：

这里的ModalLoader 是一个组件。您不能通过它调用实例方法。你需要一个实例。财政年度：reactjs.org/docs/hooks-reference.html#useref

@Horst 实际上我需要创建一个像React native image 这样的方法，我不需要调用<Image ref='someRef'/> 只是为了调用getSize()。我想在ModalLoader中调用一个可以将visibleprops改为false的函数，有没有办法实现呢？

【参考方案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 的例子。还提供了一个带有按钮的示例。

【讨论】：

如何在ModalContext 中访问ModalLoader 的道具？

只需将其添加到上下文'createContext'。想想 provider 组件的上下文。您可以在该上下文中定义道具（在 createContext 中）并在您想要的任何“消费者”组件中使用/操作它。见：reactjs.org/docs/context.html

【参考方案2】：

一个简单的example@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();

在您的 ModalLoader 中：

componentDidMount() 
      ModalInstanceManager.register(this);

  

然后在你的静态函数中：

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

【讨论】：

我更喜欢使用useContext，manager 对我来说似乎很复杂。但我想知道如何使用useContext 更改closeModal() 中的道具值@

您可以参考我的示例链接。在 ModalContext.js 中，有一个 provider 类。