Визуализация элемента ReactDOM с задержкой с использованием метода setTimeout не работает. Как визуализировать элементы с задержкой? - PullRequest
Новая
       7

Визуализация элемента ReactDOM с задержкой с использованием метода setTimeout не работает. Как визуализировать элементы с задержкой?

0 голосов
/ 08 мая 2019

Я создал плагин всплывающей подсказки как компонент React. У меня есть топологическая диаграмма с некоторыми узлами, и я хотел показать эту подсказку после наведения на узел. И это работает нормально, но проблема в том, что я не хочу этого сразу, я хочу сделать это с задержкой в ​​несколько секунд.

Я создал метод с отображением элемента DOM: 

    showWithDelay(nodeContent): any {
    this.isVisible = true;
    ReactDOM.render(<IfsTooltip
        positionLeft={this.leftPosition}
        positionTop={this.topPosition}
        isVisible={this.isVisible}
        children={nodeContent}/>, document.getElementById('ifs-tooltip'));
}

Сначала я попытался отложить только установку isVisible props в true, но компонент не был перерисован. Поэтому я решил отложить рендеринг этого элемента, но он также не помог мне.

Вот как я вызываю setTimeout: 

onNodeOver(system: any, element: any, hoverElement: TopologyElementType) {
    const nodeContent = (<NodeContent system={system} element={element}/>);
    this.leftPosition = element.x + 50;
    this.topPosition = element.y + 50;

    if (hoverElement === TopologyElementType.NODE) {
        setTimeout(this.showWithDelay(nodeContent), 4000);
    }
}

В конструкторе у меня есть: 

    constructor() {
    super();
    this.showWithDelay = this.showWithDelay.bind(this);
}

У кого-нибудь есть решение этой проблемы?

EDIT: 

onNodeOut() {
    this.isVisible = false;
    ReactDOM.unmountComponentAtNode(document.getElementById('ifs-tooltip'));
}

Задержка теперь работает, но когда я очень быстро двигаюсь по многим узлам, я вижу, что содержимое переопределяется данными из всех узлов, на которые я навели курсор мыши. Чего я хочу достичь? Когда я выхожу из узла до отображения подсказки, я хочу прекратить считать и не отображать эту подсказку.

...