在 div 的标题中显示实体定义

问题描述

在 React 应用程序中有这个 HTML 块：

<div className="my-class" title={myValue}>
   <div>{myValue}</div>
</div>

myValue 的内容是 MyCompany™。

内部 div 正确显示内容。

但是当鼠标悬停时出现的标题将 ™ 替换为 &Trade; 并显示如下：MyCompany&Trade;。

为什么标题会发生这种情况？有办法解决吗？

解决方法

可以使用dangerouslySetInnerHTML，虽然不太理想，但也可以。所以，代码应该是这样的：

let title = ["MyCompany",<span>™</span>]
<div className="my-class" dangerouslySetInnerHTML={{__html: title }}>
   <div>{title }</div>
</div>

如果您的实体是动态的，就像您在评论中告诉我的那样，那么我们可以执行以下操作：

const parseASCII = (string) => { 
  const htmlTextArea = document.createElement('textarea'); 
  textarea.innerHTML = string; 
  return htmlTextArea.value; 
}