如何在Ant Design Tooltip中实现文本的加粗与下划线效果？

问题原因 #

你用模板字符串拼接React元素时，React元素会被强制转成字符串[object Object]——因为模板字符串只能处理字符串、数字这类原始类型，无法直接识别React节点。

解决方案1：直接返回React节点组合 #

Tooltip的title属性支持传入React节点，直接用Fragment包裹普通文本和Typography组件即可：

const getTooltipContent = () => {
  return (
    <>
      Some normal text
      <Text strong underline>and some bold & underlined text</Text>
    </>
  );
};

// 使用示例
<Tooltip title={getTooltipContent()}>
  <Button>Hover to see tooltip</Button>
</Tooltip>

解决方案2：正确使用dangerouslySetInnerHTML #

如果需要动态生成HTML格式的文本，要把HTML字符串放在容器元素的dangerouslySetInnerHTML中，再传给Tooltip的title：

const getTooltipContent = () => {
  const richText = `Some normal text <strong><u>and some bold & underlined text</u></strong>`;
  return <div dangerouslySetInnerHTML={{ __html: richText }} />;
};

// 使用示例
<Tooltip title={getTooltipContent()}>
  <Button>Hover to see tooltip</Button>
</Tooltip>

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