响应16.6延迟/悬念DOM异常
响应16.6延迟/悬念DOM异常
提问于 2018-12-09 23:52:48
我正试图在我的React应用程序中启用动态导入。大多数React示例将应用程序呈现为替换内容的一些标记，例如：
ReactDOM.render(<App />, document.getElementById('app'));但是，我需要将静态块保存在#app元素中，并且呈现的反应如下：
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组件中抛出DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.的完整示例。
是我的问题还是悬念？
有没有更常见的方式渲染反应应用程序，但保持静态块？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-10 01:04:11
这里的问题是，#header和#wrapper选择器在不同的时刻引用不同的元素。
在执行container.querySelector('#header')时，#header指的是以后应该从DOM中删除的备用组件(LoadingView)中的<div id="header">。
最好将Header和Wrapper视为不同的组件，并将它们作为门户安装到现有的<div id="header">和<div id="wrapper">占位符中。它们仍然可以嵌套在父组件(App或Main)中，以在它们之间共享状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53701488
复制相关文章
相似问题
腾讯云开发者
