Javascript 在具有动态ID的dom错误中无法识别Reactstrap工具提示抛出目标

我在表单中使用了一个完美工作的自定义工具提示组件。但是，我最近发现，如果我多次使用相同的

名称

属性，就会出现目标ID冲突，这会导致某些工具提示不显示

因此，我决定在工具提示中添加一个随机字符串，以获得如下唯一ID：

//我使用“Math.random（）”，而不是“Tooltip-${name}”：
const tooltipId=`Tooltip-${name}-${Math.random（）.toString（36.substr（2,5）}`；

然后我使用刚刚创建的

id

和

target

的

tooltipId

常量

但是，一旦用户将鼠标悬停在

（i）

图标上，就会产生以下错误：

The target 'Tooltip-tp1-27tha' could not be identified in the dom, tip: check spelling

有人能解释为什么只有在生成随机ID时才会发生这种情况吗？

下面是一个沙箱来演示该问题：

---

在创建组件时而不是在渲染方法中创建工具提示。 由于状态发生更改，因此将重新渲染，因此具有新的工具提示

类CustomTooltip扩展组件{
tooltipId=`Tooltip-${this.props.name}-${Math.random（）.toString（36.substr（2,5）}`
...

在创建组件时而不是在渲染方法中创建工具提示。 由于状态发生更改，因此将重新渲染，因此具有新的工具提示

类CustomTooltip扩展组件{
tooltipId=`Tooltip-${this.props.name}-${Math.random（）.toString（36.substr（2,5）}`
...

谢谢，我知道了，但我还是不明白为什么状态会改变？是

Math.random（）

触发重新渲染？不，悬停状态下的

工具提示笔

会改变，所以这就是它重新渲染的原因。对了，请注意，谢谢，我知道了，但我仍然不明白为什么状态会改变？是

Math.random（）

会触发重新渲染吗？不，悬停时处于状态的

工具提示笔

会更改，因此它会重新渲染右，右，右