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

Question

我的大部分html代码都是由服务器生成的，但是在客户端使用React可以更快、更容易地完成一些事情，所以我需要在页面内部的某个地方创建组件，而不是在#root中。我的应用程序的本质是，在页面加载后，它需要通过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)
}