javascript - 如果 innerHTML 有点长，来自 reactstrap 的不受控制的工具提示会崩溃

Question

我UncontrolledTooltip从reactstrap得到以下信息：

<UncontrolledTooltip trigger="hover"
                     placement="right-start"
                     dangerouslySetInnerHTML={{__html:
                        props.ability.name + '<br /><br />' +
                        props.ability.description +
                        props.ability.rank
                     }}
                     target={'UncontrolledTooltip' + props.ability.id}>
</UncontrolledTooltip>

这基本上为我网站上的每个能力创建了一个悬停工具提示并显示，例如能力名称、等级、描述等。

.description在我的情况下是一个 HTML 字符串，这就是我使用dangerouslySetInnerHTML.

此解决方案在 PC 上运行良好，但在手机上，一旦您将鼠标悬停在该功能上，它就会完全冻结页面。
Chrome 手机检查工具显示该选项卡的 CPU 使用率超过 100%。我什至尝试在工具提示中插入干净的字符串而不是能力数据，但结果是一样的。
有人知道造成这种情况的原因以及可能的解决方案吗？

标签： javascriptreactjs