Question

我正在编写一个React Web应用程序，该应用程序根据窗口框架的滚动位置动态呈现更多数据，以缩短初始加载时间。我的问题是我需要知道附加数据何时完全完成更新，以便我可以调用一个外部函数来跟踪新渲染的DOM元素的滚动位置

外部函数伪代码可以在下面看到

this.renderAdditionalData(child);
//Once the child has actually displayed all of the additional data(DOM elements updated)
new Promise((res, rej) =>{
    child.mapNewLines(res);//this method calls res after all the processing has finished
}).then(() =>{this.doSomethingWithNewData(foo);});

由于mapNewLines使用了新渲染的数据的DOM属性，因此在屏幕上更新数据后，我将如何履行这一诺言

Answer 1

您将使用componentDidUpdate（react中的方法）在事件中发出事件，而不是使用Promise，这样您就可以知道何时在页面上呈现新项目，因为componentDidUpdate是在呈现和DOM属性更新后运行的。然后，您将附加一个eventListener，以侦听何时完成更多数据的绘制以触发mapNewLines。然后，将dosomethingwithNewData作为回调附加到mapNewLines函数。

let callback = (this.doSomethingWithNewData.bind(this, timestamp, element));
window.addEventListener('mapped', () => {element.mapNewLines(callback);});
this.renderAdditionalData(child);

您要从哪个窗口调度事件。

在事件中将事件侦听器附加到componentDidUpdate

1 个答案: