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

【问题标题】：Reactstrap tooltip causes an error: The target 'TooltipExample' could not be identified in the domReactstrap 工具提示导致错误：无法在 dom 中识别目标“TooltipExample”
【发布时间】：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，一切正常。但是我希望在用户加载页面时显示工具提示...

我该怎么办？

【问题讨论】：

标签： reactjs reactstrap

【解决方案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,
  });
}

【讨论】：