Reactstrap 工具提示导致错误：无法在 dom 中识别目标“TooltipExample”

Posted 2023-03-23

【中文标题】Reactstrap 工具提示导致错误：无法在 dom 中识别目标“TooltipExample”

【英文标题】：Reactstrap tooltip causes an error: The target 'TooltipExample' could not be identified in the dom

【发布时间】：2018-10-31 10:54:15

【问题描述】：

我遵循了关于tooltips 的代码示例 在 Reactstrap 中：

constructor(props) 
  super(props);
  this.state = 
    tooltipOpen: true
  ;

.
.
.
render() 
  return (
    <div>
      <p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p>
      <Tooltip 
        placement="right" 
        isOpen=this.state.tooltipOpen 
        target="TooltipExample" 
        toggle=this.toggle>
        Hello world!
      </Tooltip>
    </div>
  ) 

我收到以下错误：

错误：无法在 dom 中识别目标“TooltipExample”，提示：检查拼写

如果初始状态为tooltipOpen: false，一切正常。 但是我希望在用户加载页面时显示工具提示...

我该怎么办？

【参考方案1】：

在构造函数中，tooltipOpen 应该是false。

然后，在componentDidMount中，将tooltipOpen从false切换到true

这是代码：

constructor(props) 
  super(props);
  this.state = 
    tooltipOpen: false,
  ;


componentDidMount() 
  this.setState(
    tooltipOpen: true,
  );

【参考方案2】：

由于引入了 React Hooks，可以使用以下方法避免此错误。

import React,  useRef  from 'react'
import  UncontrolledTooltip  from 'reactstrap'

const ToolTipExample = () => 

    const ref = useRef(null)

    return (
        <div >
            <p ref=ref>Hello World</p>
            <UncontrolledTooltip target=ref>
                Tooltip message goes here :D
            </UncontrolledTooltip>
        </div>
    )

这也适用于Tooltip 组件。

【参考方案3】：

我也遇到了同样的问题，问题是初始值，如果你把true作为初始值，那么初始值必须是false，弹出框正在寻找无法呈现的target元素，所以如果你想在组件渲染时打开弹出框，请更新componentDidMount钩子中的状态。

/* initial value must be false */
state =  isPopoverOpen: false ;

componentDidMount() 
  this.setState(
    isPopoverOpen: true,
  );