Question

我的大部分html代码都是由服务器生成的，但是有些事情在React中可以更快，更轻松地在客户端中完成，因此我需要不在#root中，而是在页面深处创建Component。我的应用程序的性质是，页面加载后需要通过API检索数据，并且它连续执行5-6次，每个请求之间都有一些暂停。这通常需要10到30秒。

在第一个请求上，我可以检查元素是否尚未渲染并正常渲染：

if('sorter' in window === false) {
    window.sorter = preactRender(<Sorter filterBoundaries={window.filters} />, document.querySelector('.sorter-holder'))
}

但是随后我需要向<Sorter />发送新的道具，以便使用新到达的数据对其进行更新。但是我该怎么办呢？我尝试做window.sorter.forceUpdate()，但是它没有用，因为React的render方法返回Element，显然没有方法forceUpdate()。

也许删除旧组件并从头开始重新渲染它会容易得多？即使是反模式。

Answer 1

我只是简单地整理了一下。我向应用程序添加了一个全局变量，该变量指示排序器是否需要和更新：

if('sorter' in window === false) {
    window.sorter = preactRender(<Sorter filterBoundaries={window.filters} />, document.querySelector('.sorter-holder'))
} else {
    window.sorterUpdatePending = true
}

然后在我的组件中创建一个间隔，以检查排序程序更新是否挂起。当它是-强制更新并重置全局变量。搜索完成后，它将清除间隔。

componentDidMount() {
    var checkInterval = setInterval(() => {
        if(window.sorterUpdatePending === true) {
            this.forceUpdate()
            window.sorterUpdatePending = false
        }

        if(window.isSearching === false) {
            clearInterval(checkInterval)
        }
    }, 100)
}

如何从非反应环境中更新组件？

1 个答案: