reactjs - Reactstrap工具提示导致错误: The target 'TooltipExample' could not be identified in the dom

我已经遵循有关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>
  )
}

我收到以下错误:

如果初始状态为tooltipOpen: false，则一切正常。 但是我希望当用户加载页面时出现工具提示...
我应该怎么办？

最佳答案

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

然后，在componentDidMount中，将tooltipOpen从false切换为true
这是代码:

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

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