React中设置data-tooltip自定义属性报错该如何解决？

• 第一个写法错误原因：你使用了双层大括号{{}}做插值，这是Vue等框架的语法，React JSX中注入动态变量只需单层大括号{}包裹即可，不需要额外多加一层花括号
• 第二个拼接写法错误原因：该写法不符合JSX的属性赋值规范，不需要手动拼接引号，直接把变量放在单层大括号里赋值给属性即可

可用的正确代码 #

<a 
  href="#" 
  className="psh-Delivery_Link tip-Tooltip" 
  data-tooltip={window.theme.strings.pushCart.deliveryToolTipText}
>
  test
</a>

优化建议 #

• 建议将原生class属性替换为React官方标准的className，避免框架层面的潜在兼容问题
• 如果要避免window.theme相关链路属性不存在导致的运行时报错，可以加上可选链和兜底值，写法如下：

data-tooltip={window?.theme?.strings?.pushCart?.deliveryToolTipText || '配送提示'}

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