Reactstrap Tooltip抛出目标在带有动态ID的dom错误中无法识别

Question

我在表单中使用了可正常使用的自定义Reactstrap Tooltip组件。但是，我最近发现，如果我多次使用同一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时会发生这种情况？

这里是一个沙箱来演示该问题：https://codesandbox.io/s/fast-shape-thj00?file=/src/CustomTooltip.jsx

Answer 1

在创建组件时而不是在render方法中创建tooltipId。由于状态发生变化，因此将重新呈现状态，因此具有新的工具提示。

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

...