Блог

Я создаю подсказку, подобную этой:

 render = () => {

  let tooltip_content;
  if (this.props.tooltip) {
    tooltip_content = (
      <>
        <div>
          <h6>{this.props.tooltip}</h6>
          <button
            type="button"
            onClick={this.props.hideTooltip}
           >
             {close_icon}
           </button>
         </div>
       ...
      </>
    )
  }

  return (
  <div>
    <Tippy
      arrow
      visible={!!tooltip_content}
      interactive
      content={tooltip_content}
    >
      ...
    </Tippy>
 

Где значение tooltip_content создается на основе значения, сохраненного в хранилище redux. tooltip_content Также содержит кнопку закрытия, которая при нажатии обновляет значение в хранилище redux , чтобы оно было null таким, чтобы tooltip_content оно стало undefined .

Моя проблема в том, что content , похоже, обновление происходит до visible атрибута, что означает, что всплывающая подсказка отображается без какого-либо содержимого за долю секунды до закрытия.

Я немного не уверен в том, является ли это намерением, или, может быть, я могу справиться с этим по-другому, чтобы избежать этого…