Расширенный макет ProLayout — это компонент Ant Design Pro. Он может предоставлять стандартный, но гибкий средний и внутренний стандартный макет. Он также предоставляет такие функции, как переключение форм макета одним щелчком мыши и автоматическое создание меню. Когда контент необходимо разместить на странице, можно использовать ProLayout для снижения затрат на макетирование.

​

Проект разработан с использованием Umi. Umi интегрирован с Antd Pro. Однако при использовании ProLayout для создания меню мы столкнулись с сотнями проблем.

Используйте umirc.ts для непосредственной настройки маршрутизации и макета:

layout: {
  name: 'Ant Design',
  locale: true,
  layout: 'side',
},

Таким образом, его можно отобразить нормально, но переход по маршруту невозможно выполнить, щелкнув по меню.

нужно быть внутри @/layout Индивидуальная трансформация.

Я проверил онлайн и обнаружил, что один из них используется для значков меню. <Iconfont /> Он сказал, что принес его с собой icon Модифицировать его было бы хлопотнее, но это не так.

Расширенное преобразование макета ProLayout, динамическое меню, поддержка добавления значков в меню.

первый в umirc.ts Добавьте две строки в настроенный маршрут:

path: '/',
component: '@/layouts',

После добавления примерный формат выглядит следующим образом:

routes: [
  {
    path: '/',
    component: '@/layouts',
    routes: [
      {
        name: 'первая страница',
        path: '/',
        icon:'home',
        component: '@/pages/index',
      },
      ...
    ],
  },
],

затем в /src Создать каталог layouts Папка: Обратите внимание, что layouts нет layout

└─ src
    └─ layouts
     ├─ index.tsx
     └─ index.less

@/src/layouts/index.tsx

import React, { useState } from 'react';
import type { ProSettings } from '@ant-design/pro-layout';
import ProLayout, { PageContainer, MenuDataItem } from '@ant-design/pro-layout';
import { IconMap } from '@/utils/iconsMap';
import { Link } from 'umi';

const BasicLayout: React.FC<{}> = (props) => {
  const { route } = props;
  const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
    fixSiderbar: true,    title: 'Внешние ресурсысеть',
  });
  // меню loop
  const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
    menus.map(({ icon, children, ...item }) => ({
      ...item,
      icon: icon && IconMap[icon as string],
      children: children && loopMenuItem(children),
    }));
  return (
    <ProLayout
      logo={require('@/assets/logo.svg')}
      contentStyle={{height: 'calc(100vh - 100px)'}}
      menuDataRender={() => loopMenuItem(route.routes)}
      menuItemRender={(item, dom) => (
        <Link to={item.path ?? '/'}>
          {dom}
        </Link>
      )}
      {...settings}
    >
      <PageContainer>{props.children}</PageContainer>
    </ProLayout>
  );
};

export default BasicLayout;

Давайте объясним это здесь

menuDataRender дарендерингменю,menuItemRender Является ли отображение содержимого одной строки.

существовать props доступен в umirc.ts Получите информацию, настроенную в routes 。

Если иконка здесь прямо взята с официальной, type (нравиться HomeFilled ) не приемлемо.

Потому что здесь icon должно быть ReactNode в форме (например, <HomeFilled />）,但да umirc.ts Похоже, что Китай не поддерживает такую ​​запись, и будет сообщено об ошибке.

Поэтому необходимо использовать IconMap Переверни, я упаковал в инструмент, поставь существующее @/utils Ли: здесь key сумма стоимости umirc.ts середина route из icon соответствовать.

import { HomeFilled, SettingFilled } from '@ant-design/icons';

// менюикона
export const IconMap = {
  home: <HomeFilled />,
  setting: <SettingFilled />,
};

здесь из menuItemRender Отвечает за изменение менюиз. Item , метод имеет два параметра, один из них item ,Включатьменюиз Конфигурацияинформация（如 path , name и т. д.), вы можете использовать его напрямую Link Компонент реализует переход по маршруту.

Второй dom 就даменюоригинальныйизсодержание,Используйте напрямую Link Просто заверните это. Конечный эффект следующий:

кроме того <PageContainer /> это контент справа, используйте его props.children Просто заверните.

Разобраться в этом непросто. После долгой работы над этим проектом я наконец понял это. Я столкнулся с рядом проблем, таких как левое меню не отображается при использовании ProLayout, ненормальное отображение значков и отсутствие реакции на нажатие на меню.

Если эта статья вам полезна,Добро пожаловать, поставьте лайк и поделитесь,Вы также можете отсканировать QR-код в левой части статьи, чтобы дать мне чаевые.,Если у вас есть вопросы, вы можете оставить комментарий под статьей.

Запрещено воспроизведение без разрешения：w3h5-Сеть ресурсов для разработки веб-интерфейсов » Uni&antdизProLayoutмакетдинамичныйменю Записи о реализации и подводных камнях