React中如何在Tooltip组件的字符串内添加Link避免显示Object Object

你将React组件嵌入模板字符串时，模板字符串会自动将组件对象隐式转换为字符串，最终输出[Object Object]。你使用的Material UI系列Tooltip组件的title属性本身支持传入任意React节点，不需要强制转换为字符串格式。

不需要修改Tooltip.js的现有代码，仅调整App.js里的content传参逻辑即可：

• 不要用模板字符串包裹Tooltip的内容，改为用React Fragment（<></>）包裹的JSX节点，直接混合文本和Link组件
• 不需要把Link组件封装为函数，直接定义为JSX节点嵌入内容即可

修改后的App.js代码示例：

const renderHideOptionalClauseTrigger = () => {
  // 直接定义Link组件节点
  const productPage = <Link className="orange-link" to="/product">产品页</Link>

  return (
    <div>
      <text>我的可选贷款条款</text>
      <Tooltip
        button={
          <span>
            <i className="fas fa-exclamation-circle"></i>
          </span>
        }
        {/* content直接传JSX节点，而非字符串 */}
        content={
          <>
            将作为最后一条条款原样添加到贷款协议中。查看{productPage}了解其他条款。
          </>
        }
      />
    </div>
  );
};

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