如何从非 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)
}