如何“覆蓋”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 項目中提出一個問題。