web-multidevice-advanced-react

介绍

H5框架的多设备适配高阶组件库react包装器

使用说明

以类挪移布局组件MultiDiversion为例

1. import断点管理类和组件库

import { BreakpointManager } from 'web-multidevice-advanced-ui/dist/hookInput';
// MultiDiversion组件
import { MultiDiversionReact, DiversionItemReact } from 'web-multidevice-advanced-react/dist';
// MultiTabBar组件
import { TabBarReact, TabBarItemReact } from 'web-multidevice-advanced-react/dist';
// MultiGrid组件
import { MultiGridReact, GridItemReact } from 'web-multidevice-advanced-react/dist';

2. 注册断点回调，实时获取当前断点下的属性值

const breakpointManager = new BreakpointManager();
const unsubscribe = breakpointManager.subscribeToBreakpoint((bp) => {
  this.setState({
    direction: breakpointManager.useBreakpointValue({
      xs: 'vertical',
      sm: 'vertical',
      md: 'horizontal',
      lg: 'horizontal',
      xl: 'horizontal',
    });
  });
})

3. render中渲染组件

<div className="app">
  <MultiDiversionReact direction={direction}>
    <DiversionItemReact>
      xxx内容
    </DiversionItemReact>
    <DiversionItemReact>
      xxx内容
    </DiversionItemReact>
  </MultiDiversionReact>
</div>

4. 页面销毁前取消断点订阅并销毁实例

unsubscribe();
breakpointManager.destroy();