reactjs - 是否可以在 React 中的静态选项卡名称/文本旁边显示动态计数/数字？

Question

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

我想使用变量在选项卡文本旁边显示计数。例如...

员工(3)
客户(5)
经理(2)

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

标签： reactjs

Answer 1

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