Question

我正在尝试在我的React应用程序中启用动态导入。大多数React示例将应用程序呈现给替换内容的标签，例如：

ReactDOM.render(<App />,  document.getElementById('app'));

但是我需要在#app元素中保留静态块，并像这样渲染React：

let container = document.createElement('div');
ReactDOM.render(<App />, container);
let app = document.getElementById('app');
app.appendChild(container);
let renderedHeader = container.querySelector('#header');
let renderedWrapper = container.querySelector('#wrapper');
app.querySelector('#header').replaceWith(renderedHeader);
app.querySelector('#wrapper').replaceWith(renderedWrapper);

一切正常，直到我尝试使用惰性/暂停组件。

以下是（Gist / Stackblitz）引发的完整示例 DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.组件中的Suspense。

是我的问题还是暂记问题？

是否有更通用的方法来呈现React应用但保留静态块？

Answer 1

这里的问题是#header和#wrapper选择器在不同的时间引用不同的元素。

在执行container.querySelector('#header')时，#header指的是应在以后从DOM中删除的后备组件（<div id="header">）中的LoadingView。

最好将Header和Wrapper视为不同的组件，并将它们作为portals安装到现有的<div id="header">和<div id="wrapper">占位符上。它们仍然可以嵌套在父组件（App或Main）中以在它们之间共享状态。

React 16.6 Lazy / Suspense DOM异常

1 个答案: