通过函数访问 React Context

Question

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

目前我正在用<ResponsiveProvider> 包裹我的<App>。此提供程序订阅windows.resize 事件并将格式存储到上下文的值中。

如果格式发生变化，所有子元素都会重新渲染。没关系。

现在，对于基于当前小部件格式的显示/隐藏组件，我只需实现一个组件，该组件使用contextType 访问此上下文。

但我需要一个可以在应用程序的任何位置使用的函数，例如：ResponsiveUtil.isSmall() 或 ResponsiveUtil.getCurrentFormat()。

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

谢谢

Answer 1

我不确定这是否是最好的方法，但它会起作用。您可以设置一个全局事件侦听器，该事件侦听器将在每次组件中的格式更改时被调度。我为全球事件找到了一个包here，但编写自己的包也不难。使用react-native-event-listeners，它看起来像：

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;

然后，在您的 <ResponsiveProvider> 中，在 resize 事件期间，在您更新上下文时调度新格式

ResponsiveProvider.js

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