我在表单中使用了可正常使用的自定义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
在创建组件时而不是在render方法中创建tooltipId。由于状态发生变化,因此将重新呈现状态,因此具有新的工具提示。
class CustomTooltip extends Component {
tooltipId = `Tooltip-${this.props.name}-${Math.random().toString(36).substr(2, 5)}`
...