Javascript 通过函数访问上下文

我目前正在开发一个软件包，它提供我的React小部件响应能力。问题是，响应性并不取决于视口宽度，而是取决于小部件容器元素的宽度

目前我正在用

包装我的

。此提供程序订阅

windows.resize

事件，并将格式存储到上下文的值中

如果格式更改，所有子元素都将重新渲染。那很好

现在，对于基于当前小部件格式的显示/隐藏组件，我可以实现一个组件，该组件使用

contextType

访问此上下文

但是我需要一个函数，我可以在应用程序的任何地方使用它，比如：

ResponsiveUtil.isSmall（）

或

ResponsiveUtil.getCurrentFormat（）

通过函数访问信息（格式）的最佳方法是什么

---

谢谢

我不确定这是否是最好的方法，但它会奏效。您可以设置一个全局事件侦听器，该侦听器将在每次组件中的格式更改时被调度。我为全球活动找到了一个软件包，但编写自己的也不难。使用

react原生事件侦听器

，它看起来类似于：

ResponsiveUtil.js

import { EventRegister } from 'react-native-event-listeners';

let format = {};

EventRegister.addEventListener('responsive-format-changed', data => {
    format = data;
});

const ResponsiveUtils = {
    getCurrentFormat() {
        return Object.assign({}, format);
    },
    isSmall() {
        //isSmall logic
    }
};

export default ResponsiveUtils;

import { EventRegister } from 'react-native-event-listeners';
//...Other component code
window.resize = () => {
    let format = calculateNewFormat();
    //update context...
    //dispatch new format
    EventRegister.emit('responsive-format-changed', format);
};

然后，在

中，在

resize

事件期间，在更新上下文时发送新格式

ResponsiveProvider.js

import { EventRegister } from 'react-native-event-listeners';

let format = {};

EventRegister.addEventListener('responsive-format-changed', data => {
    format = data;
});

const ResponsiveUtils = {
    getCurrentFormat() {
        return Object.assign({}, format);
    },
    isSmall() {
        //isSmall logic
    }
};

export default ResponsiveUtils;

import { EventRegister } from 'react-native-event-listeners';
//...Other component code
window.resize = () => {
    let format = calculateNewFormat();
    //update context...
    //dispatch new format
    EventRegister.emit('responsive-format-changed', format);
};

---

我不确定这是否可行，但我想到了

useContext

钩子。虽然我甚至不知道钩子是否在RN。嗨！我有一个类似的方法：我将ResponsiveUtil制作成一个单例，并从ResponsiveProvider和我的组件中使用它。这很有效，但是：如果组件不使用ResponsiveContext，则不会重新渲染。因此，如果在组件中设置静态contextType（我希望避免），那么如果格式更改，组件将重新呈现，并且可以通过ResponsiveUtil.xy（）访问格式。但是如果我删除contextType，组件就不会重新呈现。