Это моя старая реализация компонента 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"}} />,
},
Здесь я сталкиваюсь с двумя проблемами.
function Tab1(props) {
return <div {...props}>JSX for original Tab1</div>;
}
Есть лучший способ это сделать?
Используйте компонент более высокого порядка, например <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 повторяется. В таком случае,
<CustomTabs/>
, который принимает список вкладок, упомянутый в вопросе.<TabPaneWrapper/>
. Вы можете зациклить этот список внутри компонента <CustomTabs/>
, чтобы сгенерировать упомянутый выше tabList, а затем передать его компоненту Ant Desing <Tabs/>
.