javascript - 如何使徽章通知仅针对特定选项卡显示

Question

仅在映射反应时，如何使徽章通知仅出现在特定选项卡中

这是我的以下代码

<div className="team-management-tab-items">
                {tabs.map((tab, index) => (
                  <div
                    id={editable === true ? "" : `${tab}`}
                    className={
                      activeTab === index
                        ? "team-management-tab-item selected"
                        : "team-management-tab-item"
                    }
                    key={tab}
                    role="button"
                    tabIndex={tab}
                  >
                        {tab !== "Sub-Team" && (
                          <Badge
                            color="error"
                            badgeContent={1}
                            max={99}
                            variant="default"
                          >
                            <span className="tab-item-text">{tab}</span>
                          </Badge>
                        )}
                    )}
                    <span className="tab-item-indicator" />
                  </div>
                ))}
              </div>

标签： javascriptreactjsreact-hooks

Answer 1

我认为您目前以正确的方式完成了它，如果您想让它更具可配置性和可扩展性，您仍然可以进行更多更改。同样，它可能不是最适合您的用例，但在这种情况下采用配置驱动的方法可以在未来添加更多属性。

const TAB_CONFIG = [
  {
    label: "Mission",
    id: "mission",
    showBadge: true,
    disabled: false
  },
  {
    label: "Agreement",
    id: "agreement",
    showBadge: true,
    disabled: false
  },
  {
    label: "Calendar",
    id: "calendar",
    showBadge: true,
    disabled: false
  },
  {
    label: "Members",
    id: "members",
    showBadge: true,
    disabled: false
  },
  {
    label: "Sub-Team",
    id: "sub-team",
    showBadge: false,
    disabled: false
  }
]

// please use a better name, gave this name just for help
const TabsComponent = () => {

  // logic to render badges
  const renderBadge = (count) => (
    <Badge
      color="error"
      badgeContent={1}
      max={99}
      variant="default"
    >
      <span className="tab-item-text">{count}</span>
    </Badge>
  )

  // logic to render tabs
  const renderTabs = () => {
    return TAB_CONFIG.map(({ label, id, showBage, disabled }) => (
      <div
        id={editable === true ? "" : `${id}`}
        className={
          activeTab === id
            ? "team-management-tab-item selected"
            : "team-management-tab-item"
        }
        key={id}
        role="button"
        tabIndex={tab}
      >
        {showBadge && renderBadge(id)}
        <span className="tab-item-indicator" />
      </div>
    ))
  }

  return (
    <div className="team-management-tab-items">
      {renderTabs()}
    </div>
  )

}