如何在遍历列表渲染时为每个元素展示不同的Tooltip提示文本

实现方案 #

你当前代码中Tooltip的content属性为固定值"Hello"，只要将该字段和遍历项的配置绑定即可实现不同图标显示不同提示文本，两种常用实现方式如下：

方案1：扩展数据源（最直观易维护）

1. 给你遍历的sv数组的每个配置项新增自定义tooltip文本属性：

const svList = [
  {
    key: 'edit',
    iconId: 'edit-icon',
    tooltipContent: '编辑当前条目',
    // 保留原有disabled、count等属性
  },
  {
    key: 'delete',
    iconId: 'delete-icon',
    tooltipContent: '删除当前条目',
    // 保留原有属性
  },
  // 其余图标对应配置
]

2. 修改Tooltip组件的content属性为动态取值，修正后的完整代码如下：

{svList.map(sv => (
  <React.Fragment key={sv.key}>
    <WedgeContainer>
      <Button variant="icon" onClick={() => openView(sv)} disabled={sv.disabled || !item.canEdit}>
        <Tooltip content={sv.tooltipContent}>
          <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>
))}

方案2：映射表适配（无需改动原有数据源）

如果不方便修改原有sv数组的结构，可以单独维护一个映射关系匹配文本：

// 可根据sv.key或sv.iconId做匹配，确保唯一对应即可
const tooltipMap = {
  edit: '编辑当前条目',
  delete: '删除当前条目',
  view: '查看详情',
  share: '分享内容'
}

然后修改Tooltip的content属性即可：

<Tooltip content={tooltipMap[sv.key]}>

注意事项 #

如果部分图标不需要显示Tooltip，可以给对应映射值设为空字符串，或者加条件判断按需渲染Tooltip组件即可。如果需要匹配预期的Tooltip样式，可调整组件的样式属性对齐设计效果。

内容的提问来源于stack exchange，提问作者agobago