映射列表时如何显示不同的工具提示文本？答案

【问题标题】：How to display different tooltip text while mapping over a list?映射列表时如何显示不同的工具提示文本？
【发布时间】：2021-11-25 14:04:05
【问题描述】：

我正在遍历一个列表，我想为不同的图标添加不同的工具提示文本，但不完全确定如何去做。这是我目前所拥有的：

          <React.Fragment key={sv.key}>
            <WedgeContainer>
              <Button variant="icon" onClick={() => openView(sv)} disabled={sv.disabled || !item.canEdit}>
                <Tooltip content="Hello">
              <Icon iconId={sv.iconId} size="medium" cursor="pointer" color={theme.font.color.primaryDark} />
              </Tooltip>
              </Button>
                { !!sv.count && (<Badge borderColor={theme.color.alert} color={theme.color.alert} top="-3rem" right="-1.5rem"  content={sv.count}/>) }
              <Wedge />
            </WedgeContainer>
            <Spacer width="4rem" />
          </React.Fragment>
        ))}

这就是我想要实现的目标：

【问题讨论】：

是否可以将 Tooltip 存储在数组中并在循环时分配它？

标签： reactjs typescript mapping tooltip

【解决方案1】：

您可以在循环之外创建一个数组。在我的示例中，我使用索引来访问项目，但在您的情况下，您可以发挥创造力并以最适合的方式进行操作。

const tooltipContent = [
   'tooltip1',
   'tooltip2',
   'tooltip3',
]   



<React.Fragment key={sv.key}>
        <WedgeContainer>
          <Button variant="icon" onClick={() => openView(sv)} disabled={sv.disabled || !item.canEdit}>
            <Tooltip content={tooltipContent[index]}>
          <Icon iconId={sv.iconId} size="medium" cursor="pointer" color={theme.font.color.primaryDark} />
          </Tooltip>
          </Button>
            { !!sv.count && (<Badge borderColor={theme.color.alert} color={theme.color.alert} top="-3rem" right="-1.5rem"  content={sv.count}/>) }
          <Wedge />
        </WedgeContainer>
        <Spacer width="4rem" />
      </React.Fragment>
    ))}

如果消息在您的“sv”项目之一中，您可以简单地将 sv.x 传递给工具提示内容。

【讨论】：