是否可以在React中显示静态标签名称/文本旁边的动态计数/数字？

Question

我在React JS中有一个基本问题。我有3个标题为(员工，客户和经理)的标签，点击每个标签将切换到相应的视图。假设所有3个选项卡都在相同的TabList组件中(相同的层次结构/级别)

我想使用一个变量在标签文本旁边显示计数。例如..。

员工(3)

客户(5)

经理(2)

是否可以在React中显示静态选项卡文本/名称旁边的动态计数(整数/数字)？计数表示员工或客户等的数量。我可以在每个视图中根据员工或经理等的数量递增计数。我只想知道是否可以将这个动态计数(使用一个变量)与静态选项卡文本/标签连接起来

Answer 1

是。我想你可以做到的。使用count/number的状态，以便您的组件在每次值更改时都会更新。

Answer 2

如果你发送标签的“名称”作为道具，像这样的<Tab name="Employees">或<Tab name={tabName}>，你可以使用模板文字(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)。示例：Employess ${countState}}>。如果你在Tab组件中嵌套名字，你可以看看@Noor Nawaz comment=> <Tab>Employess ({count})</Tab>。是的，你可以用文本动态显示状态。