Архитектура с несколькими вкладками на основе React+Antd

задний план

Фоновый макет предприятия часто использует метод с несколькими вкладками, и вы можете получить доступ к открытым страницам, переключаясь между различными вкладками, как показано на следующем рисунке. Распространенным сценарием в системе управления фоном является отображение со страницы списка на страницу сведений.Форма с несколькими вкладками может лучше соответствовать этому бизнес-сценарию, особенно при сравнении разных страниц вкладок.

План реализации

Реализовано с использованием реактивного маршрутизатора

Мы можем записывать разные маршруты в виде каждой метки, т.е.<tab, url>В виде пар "ключ-значение" запишите маршрут, соответствующий метке. При нажатии на другую метку компонент, соответствующий соответствующему маршруту, отображается в области содержимого для достижения нескольких вкладок.

Однако в этом решении есть проблема, которую нельзя обойти, то есть react-router отображает один компонент на основе URL-адреса и не может кэшировать отображаемый компонент, что означает, что при нажатии на метку соответствующий подкомпонент перезагружается. каждый раз Рендеринг, последнее соответствующее состояние не может быть сохранено (принцип React-router). Это приемлемо для сценариев чистого отображения, например, если метка соответствует странице сведений о новостях, все будет в порядке, даже если она будет обновлена. Но для некоторых сценариев возникает большая проблема. Например, в сценарии ввода я ввожу некоторый контент в метку 1, затем переключаюсь на метку 2, чтобы запросить определенные данные, а затем возвращаюсь к метке 1. Элемент данных теряется. .

Если React-маршрутизатор умеет кэшировать компоненты, эту проблему можно решить. Запросив документацию по реакции-маршрутизатору, выяснилось, что он не поддерживается, и нет такого механизма, как keep-alive в vue в реакции. В отрасли существует решение маршрутизации React-Keeper вместо React-Router для решения проблемы кэширования компонентов.

Реализация на основе JQuery

Как эта форма была реализована в JQ до появления React? Использование JQ проще в реализации, вам нужно только установить css контента, соответствующего тегу, на{display: block}, для содержимого css, соответствующего другим тегам, установлено значение{display: none}Вот и все.

Реализация на основе компонента Antd Tab

Компонент вкладки Antd реализует функции, аналогичные вышеупомянутому JQ, например:

import {Tabs, Button} from 'antd';
const {TabPane} = Tabs;
ReactDOM.render( <
    <Tabs activeKey="1" >
        <TabPane tab = "Tab 1" key = "1" >Content of tab 1 </TabPane> 
        <TabPane tab = "Tab 2" key = "2" >Content of tab 2 </TabPane> 
        <TabPane tab = "Tab 3" key = "3" >Content of tab 3 </TabPane> 
    </Tabs>,
    mountNode,
);

TabPane, соответствующий активному ключу, будет отображаться, а другие TabPanes будут скрыты.

Сначала создайте структуру данных Tab:

{
    name,  // 该标签名称
    component, // 标签对应的组件
    props， // 组件需要的属性
}

Добавить в глобальное состояние:

// 全局标签列表
{
    tabs: [] // 全局tabs
}

// 对应的操作
export const ADD_TAB = 'ADD_TAB';
export const REMOVE_TAB = 'REMOVE_TAB';
export const UPDATE_TAB = 'UPDATE_TAB';
export const CHANGE_TAB = 'CHANGE_TAB';
export const CLEAR_TAB = 'CLEAR_TAB';

Добавление, закрытие и обновление тегов соответствуют описанным выше операциям с массивом вкладок.

код показывает, как показано ниже:GitHub.com/Саймон I О/Вуд…

Эффект следующий: