通过函数访问React上下文



我目前正在开发一个软件包,这给了我的反应响应能力。问题是,响应性不取决于视口宽度,而是取决于小部件元素元素的宽度。

目前,我将<App><ResponsiveProvider>包装。此提供商订阅了windows.resize事件,并将格式存储到上下文的值中。

如果格式更改,则所有儿童元素都会重新渲染。很好。

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

访问此上下文

但是我需要一个函数,我可以在应用程序的任何地方使用,例如: ResponsiveUtil.isSmall()ResponsiveUtil.getCurrentFormat()

可以通过函数访问信息(格式)的最佳方法?

谢谢

我不确定这是否是 best 方法,但它会起作用。您可以设置一个全局事件侦听器,每当组件中的格式更改时,该侦听器将被派发。我在这里找到了一个用于全球事件的软件包,但也不难编写自己的包裹。使用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);
};

相关内容

  • 没有找到相关文章

最新更新