如何“覆盖” React-Bootstrap 选项卡组件

Question

我有一个小问题。我理解它，但不知道如何构建正确的实现...

我有一个带有选项卡 /选项卡组件的表单以显示内容。

首先，我使用了这种语法：

<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，...）的选项卡，以便有可能仅在一个地方更改类。

我的第一次尝试是一个功能：

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”选项卡组件不使用我的组件...它只是构建一个标签组件，并在我的声明中发现了属性...

所以我问自己是否有可能执行此类操作，或者“函数”或“函数”实施是实现我目标的最佳方法...

预先感谢任何建议。

Answer 1

这确实是React-Bootstrap中的一个非常奇怪的实现。我也遇到了这个。我什至会称其为“错误”，因为我看不出应该以这种方式实现选项卡组件的任何理由。

例如，您目前唯一的赌注是使用MAP，例如：

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

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