响应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
复制
相似问题
反应悬念/懒惰的延迟？
使用BrowserRouter延迟和悬念延迟加载页面
何时编码拆分(反应-悬念和延迟)
响应路由器-分割延迟导入的代码。带悬念的开关
反应-在一个悬念中包装延迟路线和对每一个延迟路由组件分开的悬念。
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
💥开发者 MCP广场重磅上线！
精选全网热门MCP server，让你的AI更好用 🚀
腾讯云开发者
