Как применить стили к TabPane в новом компоненте Antd Tabs

Это моя старая реализация компонента Tabs в Ant Design.

const tabList = [
  {
    key: "tab1",
    label: "Tab1",
    children: <Tab1 />,
  },
  {
    key: "tab2",
    label: "Tab2",
    children: <Tab2 />,
  },
];

<Tabs onChange = {onTabChange} activeKey = {selectedTab}>
  {tabList.map((tab) => {
    const { key, label, children } = tab;
    return (
      <Tabs.TabPane
        key = {key}
        tab = {label}
        style = {{ margin: "1.5rem auto 1.5rem" }}
      >
        {children}
      </Tabs.TabPane>
    );
  })}
</Tabs>;

В новой версии ( > 4.23.0 ) уменьшен шаблон.

Я могу просто передать свой tabList своим вкладкам в качестве опоры items.

Новый код выглядит примерно так.

<Tabs items = {tabList} />

Но у меня возникла проблема со стилем.

Я добавляю верхнее и нижнее поля ко всем компонентам TabPane.

Чтобы получить этот запас в новой реализации. Я должен был сделать что-то вроде этого.

  {
    key: "tab1",
    label: "Tab1",
    children: <Tab1 style = {{margin: "1.5rem 0 1.5rem"}} />,
  },

Здесь я сталкиваюсь с двумя проблемами.

  1. Мне нужно добавить это для всех моих вкладок в tabList
  2. Мне нужно иметь div в каждом компоненте, распространяющем реквизиты, переданные выше.

function Tab1(props) {
  return <div {...props}>JSX for original Tab1</div>;
}

Есть лучший способ это сделать?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
124
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Компонент более высокого порядка может решить эту проблему

Используйте компонент более высокого порядка, например <TabPaneWrapper> или <TabChildrenWrapper>. Этот компонент ничего не делает, кроме как оборачивает ваши дочерние элементы (<TabPane>) в div и задает требуемые стили.

Составная часть:

export function TabPaneWrapper({
  children,
  ...props
}){

  return (
    <div style = {{ margin: "1.5rem auto 1.5rem" }} {...props}>
      {children}
    </div>
  );
}

Применение:

const tabList = [
  {
    key: "tab1",
    label: "Tab1",
    children: <TabPaneWrapper> <Tab1 /> </TabPaneWrapper>,
  },
  {
    key: "tab2",
    label: "Tab2",
    children: <TabPaneWrapper> <Tab2 /> </TabPaneWrapper>,
  },
];

Если у вас есть больше вкладок или вы используете этот компонент вкладок в нескольких местах. Вы обнаружите, что TabPaneWrapper повторяется. В таком случае,

  1. Вы можете создать собственный компонент вкладок, например <CustomTabs/>, который принимает список вкладок, упомянутый в вопросе.
  2. Вместо того, чтобы оборачивать каждую вкладку в tabList <TabPaneWrapper/>. Вы можете зациклить этот список внутри компонента <CustomTabs/>, чтобы сгенерировать упомянутый выше tabList, а затем передать его компоненту Ant Desing <Tabs/>.

Другие вопросы по теме