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

Question

我有以下关于 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。但是我希望工具提示在用户加载页面时出现...

我该怎么办？

Answer 1

由于引入了 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组件。

Answer 2

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

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

这是代码：

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

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