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

Question

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

我收到以下错误:

Error: The target 'TooltipExample' could not be identified in the dom, tip: check spelling

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

我应该做什么？

Answer 1

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

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

这是代码:

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

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