Javascript 如果反应图中超过2个，则查看带有计数的更多按钮

我有一套东西

var set2 = {
      men: { value: "men", label: "Men", type: "select", "options": [{label: "Tshirt", value_string: "1"}, {label: "Shirt", value_string: "2"}, {label: "Shoes", value_string: "6"}, {label: "Pants", value_string: "7"}] },
}

内选项集我有一些标签，如T恤，衬衫，鞋子等

---

所以，如果选项有两个以上的集合，我想显示View more按钮和inside按钮，我想显示剩余的计数。示例-我有4个内置选项。我想显示前两个以及剩余的计数和+符号。我想要呈现的示例如下

男士-

Tshirt

2+。只需单击2+即可显示所有剩余的内容。

您可以这样做

const SHOW\u默认值=2；
导出默认函数App（）{
const[showAll，setShowAll]=useState（false）；
const options=set2.men.options；
const visibleOptions=showAll？options.length：默认情况下显示；
const toggleShowAll=（）=>{
设置showAll（！showAll）；
};
返回(
{options.slice（0，visibleOptions）.map（{label}）=>(
{label}
))}
{options.length>默认显示（&U）(
{！showAll？`+${options.length-SHOW\u默认值}更多`:“SHOW Less”}
)}
);
}

const按钮=（）=>{
常量默认值_标签=2
const[showLables，setShowLables]=useState（'showTwoLabels'）
常数集2={
男子：{
值：“男性”，标签：“男性”，类型：“选择”，“选项”：[{
标签：“T恤”，
值\u字符串：“1”
}，{标签：“衬衫”，值_字符串：“2”}{
标签：“鞋子”，
值_字符串：“6”
}，{标签：“裤子”，值_字符串：“7”}]
},
}
返回(
{set2.men.options.length{
返回{rec.label}
}) : 
{showLables=='showtowLabels'？{set2.men.options[0]。label}，{set2.men.options[0]。label}:false}
{showLables==='showtowLabels'？setShowLables（'ShowAllLabels'）}>+{set2.men.options.length-默认标签}:false}
{showLables==='ShowAllLabels'？{set2.men.options.map（rec=>{rec.label}）}:false}
}
)
}