Всплывающая подсказка Reactstrap вызывает ошибку: целевой объект «TooltipExample» не может быть идентифицирован в DOM

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>
  ) 
}

И я получаю следующую ошибку:

Ошибка:целевой 'TooltipExample' не может быть идентифицирован в DOM, совет: проверьте орфографию

Все работает нормально, если начальное состояние tooltipOpen: false. Но Мне бы хотелось, чтобы всплывающая подсказка появлялась, когда пользователь загружает страницу ...

Что мне делать?

Answer 1

В конструкторе tooltipOpen должно быть false.

А затем в componentDidMount переключите tooltipOpen с false на true

Это код:

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

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