javascript - React 16.6 lazy/Suspense DOM 异常

Question

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

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

但我需要在 #app 元素中保留静态 block 并像这样渲染 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);

在我尝试使用惰性/Suspense 组件之前，一切都按预期工作。

这是 ( Gist/Stackblitz ) 抛出的完整示例 DOMException:无法在“节点”上执行“removeChild”:要删除的节点不是该节点的子节点。 Suspense 组件内。

是我的问题还是 Suspense 的问题？

是否有更常见的方式来呈现 React 应用程序但保留静态 block ？

Answer 1

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

此时 container.querySelector('#header')被执行，#header指<div id="header">在后备组件 ( LoadingView ) 中应该稍后从 DOM 中删除。

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