如何“覆盖”react-bootstrap 选项卡组件

Question

我有一个小问题。 我明白了，但不知道如何构建正确的实现...

我有一个带有 Tabs / Tab 组件的表单来显示内容。

一开始，我使用了这种语法：

<Tabs
        id="profile-page-tabs"
        activeKey={active_tab}
        onSelect={(t) => toggle(t)}
        className="mb-3">
    <Tab 
            tabAttrs={ title: t("Profile-Title") }
            eventKey="mykey"
            title={<span>{<AccountIcon />}{" "}<span className="d-none d-md-inline">{t("Profile-Title")}</span></span>}>
        <h2 className="d-block d-md-none">{t("Profile-Title"}</h2>
        <ProfileForm currentUser={currentUser} />
</Tabs>

它按预期工作。

现在，我想重构这个逻辑，让一个组件返回具有相同“配置”（类、h2、...）的所有选项卡，以允许仅在一个地方更改类。

我的第一次尝试是使用 function：

import { Tab } from "react-bootstrap";

export function buildTab(icon, eventKey, children, label, title = null) {
    if (!title) {
        title = label;
    }

    return (
        <Tab
                tabAttrs={{ title: title }}
                eventKey={eventKey}
                title={<span>{icon}{" "}<span className="d-none d-md-inline">{label}</span></span>}>
            <h2 className="d-block d-md-none">{label}</h2>
            {children}
        </Tab>
    )
}

还有一次，它就像一个魅力。 但是有了这个实现，我必须这样调用我的选项卡：

<Tabs
        id="profile-page-tabs"
        activeKey={active_tab}
        onSelect={(t) => toggle(t)}
        className="mb-3">
    {buildTab(
            <Person />,
            'mykey',
            <ProfileForm currentUser={currentUser} />,
            t('Profile-Title')
    )}
</Tabs>

所以工作，但不是很好......我创建了一个这样的组件来称它为“像一个组件”：

import { Tab } from "react-bootstrap";

const TabItem = ({title, eventKey, icon, titleAttr, children}) => {

    if (!titleAttr) {
        titleAttr = title;
    }
    return(
        <Tab
                tabAttrs={{ title: titleAttr }}
                eventKey={eventKey}
                title={<span>{icon}{" "}<span className="d-none d-md-inline">{title}</span></span>}>
            <h2 className="d-block d-md-none">{title}</h2>
            {children}
        </Tab>
    );
}
export default TabItem;

我这样称呼它：

<Tabs
        id="profile-page-tabs"
        activeKey={active_tab}
        onSelect={(t) => toggle(t)}
        className="mb-3">
    <TabItem
            icon={<Person />}
            eventKey='mykey',
            title={t('Profile-Title')}
        <ProfileForm currentUser={currentUser} />
    </TabItem>
</Tabs>

在这种情况下，问题是 react-bootstrap Tabs 组件不使用我的组件......它只是构建一个 Tab 组件，其中包含它在我的声明中找到的属性......

所以我问自己是否有可能做那样的事情，或者“功能”实施是实现我目标的最佳方式......

提前感谢您的任何建议。

Answer 1

这确实是 react-bootstrap 中一个非常奇怪的实现。 我也遇到过这个。 我什至会称它为“bug”，因为我看不出有任何理由应该以这种方式实现 Tabs 组件。

你目前唯一的选择是使用 map，例如：

  { tabsConfiguration.map(tabConfig => {
    return (
      <Tab
          someAttr={tabConfig.someAttr}>
        <h2 className="d-block d-md-none">{tabConfig.title}</h2>
        {tabConfig.body}
    </Tab>
    )
    })}

如果我不是唯一想知道这种意外行为的人，也许我们应该在 react-bootstrap 项目中提出一个问题。