时间戳

首页 > 解决方案 > ReactRouter 将渲染组件路由到容器元素

javascript - ReactRouter 将渲染组件路由到容器元素

问题描述

我的问题是我需要将单独的路由组件呈现给后端创建的元素。我敢肯定这是不规则的。本质上，我从一个 html 文档开始，需要将路由组件呈现给 dom 中的特定元素。

例子：

如果我有四个组件，每个组件都需要呈现为预生成的元素。

<body>
<div id="elone" />
<div id="eltwo" />
<div id="elthree" />
<div id="elfour" />
</body>

现在我需要将我各自的组件渲染到这些元素中的每一个。问题是，如果我在组件中调用 ReactDOM.render ，它就无法识别路由器，而且看起来该路由无论如何都不会渲染到特定元素。

注意：不幸的是，我不能在 JS 中编写文档，它必须预先生成。如果有其他解决方案，我不需要通过react router来完成，但组件必须识别路由器。

标签： javascriptreactjsreact-routerreact-router-v4react-router-dom

解决方案

我讨厌回答自己的问题，这让人觉得这里没有人真正回答问题。

无论如何，解决方案是在组件中使用 ReactDOM.createPortal 而不是 ReactDOM.render。确保使用路由器将组件渲染到容器外部的元素，您希望将子组件传送到该元素，否则您显然会破坏门户指向的元素。

推荐阅读