import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="布局/页面框架 Frame" />

# Frame

#### 请结合 umi 使用

## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| route | 路由配置，与 Pro-Layout 相同，与 umi 一起使用后，BasicLayout 的 props 里可以取到 | { routes: [] } | - |
| location | 路由的 location，与 umi 一起使用后，BasicLayout 的 props 里可以取到 | BasicRouteProps['location'] \| { pathname?: string } | - |
| leftContent | 显示在 Header 左侧的内容，屏幕缩小后自动隐藏 | ReactNode | - |
| rightContent | 显示在 Header 右侧的内容 | ReactNode | - |
| menuDataRender | menuData 的 render 方法，用来自定义 menuData，同 Pro-Layout | (menuData: MenuDataItem[]) => MenuDataItem[] | - |
| postMenuData | 在显示前对菜单数据进行查看，修改不会触发重新渲染，同 Pro-Layout | (menuData: MenuDataItem[]) => MenuDataItem[] | - |
| formatMessage | react-intl 的 formatMessage 方法，同 Pro-Layout，如有使用 umi 国际化插件要传 | (message: MessageDescriptor) => string | - |
| menuExtra | 左侧导航栏顶部内容 | ReactNode | - |
| menuItemRender | 自定义菜单项的 render 方法，一般只有以下事例的写法 | [menuItemRender 类型](#menuItemRender类型) | - |
| renderNavigationSection | 自定义 render 导航栏 Section | ((menu: MenuDataItem[]) => ReactNode) \| false | - |
| headerRender | 自定义渲染，一般是页面顶部需要加横幅时使用。[使用方式](#headerRender) | (defaultDom: React.ReactNode) => React.ReactNode | - |
| contentStyle | 用来设置背景颜色等样式 | CSSProperties | - |

### menuItemRender 类型

```
(
    originalProps: {
      className: string;
      onClick: (event: React.MouseEvent<HTMLElement>) => void;
    },
    itemProps: { subNavigationItems, path, ... 其它属性一般不会用到 },
    defaultDom: React.ReactNode,
) => ReactNode
```

### menuItemRender 示例，按照这种写法

```
menuItemRender={(
    originalProps,
    { subNavigationItems, path },
    defaultDom
    ) => {
    if (subNavigationItems && subNavigationItems.length > 0) {
        return (
        <div
            {...originalProps}
            onClick={() => {
              if (location.pathname !== subNavigationItems[0].path) {
                history.push(subNavigationItems[0].path);
              }
            }}
        >
            {defaultDom}
        </div>
        );
    }

    return (
        <Link
            {...originalProps}
            to={path || "/"}
            onClick={e => {
              if(location.pathname === path) {
                e.preventDefault();
              }
            }}>
          {defaultDom}
        </Link>
    );
}}
```

<a name="headerRender">headerRender 使用</a>

```
headerRender={defaultDom => (
  <>
    <div>广告横幅，套餐过期通知等</div>
    {defaultDom}
  </>
)}
```