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

Question

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

          <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>
        ))}

这就是我要实现的目标：

Answer 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 传递给工具提示内容即可。

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

How to display different tooltip text while mapping over a list?

reactjs

typescript

mapping

tooltip