Reactstrap Tooltip throws target could not be identified in the dom error with dynamic IDs

Question

我在表单中使用了一个完美运行的自定义 Reactstrap 工具提示组件。但是，我最近发现，如果我多次使用相同的 name 属性会发生目标 ID 冲突，这会导致某些工具提示不显示。

因此，我决定在工具提示中附加一个随机字符串，以获得像这样的唯一 ID：

// instead of just `Tooltip-${name}`, I use `Math.random()`:
const tooltipId = `Tooltip-${name}-${Math.random().toString(36).substr(2, 5)}`;

然后我使用刚创建的 tooltipId 常量作为 id 和 target.

但是，一旦用户将鼠标悬停在 (i) 图标上，就会产生以下错误：

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

谁能解释一下为什么只有在生成随机 ID 时才会出现这种情况？

Answer 1

在创建组件时创建您的 tooltipId，而不是在渲染方法中。因为状态改变，它被重新渲染，因此有一个新的 tooltipid。

class CustomTooltip extends Component {
  tooltipId = `Tooltip-${this.props.name}-${Math.random().toString(36).substr(2, 5)}`

...

javascript