@befe/brick-comp-page v0.2.98

FAQ

页面间切换时，内容区发生 "背景透明 + 无内边距" <-> "白背景 + 特定内边距" 的切换

• 请设置 props.contentType: 'plain'
• 详见 layout 中 <Content /> 关于 props.type 的说明

侧边栏菜单在小屏幕进入抽屉模式情况下，如果进入 hover 呼出的三级菜单的 menuPopper，侧边栏抽屉会缩回屏幕外

• 这是因为 三级 menuPopper 的 popup portal 挂在容器默认为 document.body，当鼠标进入其中，就会触发 sidebar 抽屉的"鼠标离开收起"
• 通过从 sidebarRenderProps 获得 refSidebarInner 设置给 SideNav 的 props.submenuPopperPortalContainer 解决

const DeprecatedSideNav = () => {
    return (
        <SideNav
            // ...
            submenuPopperPortalContainer={() => sidebarRenderProps.refSidebarInner?.current || document.body}
        />
    )
};

const AppLayout = () => {
    // Page 渲染过程中无法通过遍历 renderSidebar 返回的结果的所有子孙找到 SideNav
    const renderSidebar = () => <DeprecatedSideNav />;
    return (
        <Page
            // ...
            renderSidebar={renderSidebar}    
        />
    )    
};

• 关于 props.submenuPopperPortalContainer 的更多说明见 SideNav
• 实际上仅在以下情况均满足时才需要进行设置
  • menu 超过 3 层，即有 hover 呼出 menuPopper
  • 所定义 Page 的 props.renderSidebar 的输出结果无法通过遍历子孙 的方式找到 SideNav 元素

// e.g 这种情况下，即使 menu 超过 3 层，也不需要为 SideNav 设置 `props.submenuPopperPortalContainer`
const AppLayout = () => {
    // Page 渲染过程中可以 renderSidebar 返回的结果直接找到 SideNav
    // 故可以直接设置其 submenuPopperPortalContainer，而不需要特别设定
    const renderSidebar = (sidebarRenderProps) => <SideNav />
    return (
        <Page
            // ...
            renderSidebar={renderSidebar}    
        />
    )    
}