在现代 web 应用中，前端技术变得越来越重要。在前端应用中，React 是最流行的库之一。但是，只有在 React 渲染到 HTML 文档的根元素上时，才能够把组件渲染到浏览器的页面上。
在某些情况下，我们可能希望以一种不同的方式呈现 React 组件 - 例如，在模态框或弹出窗口中，或将组件渲染到页面中的其他位置。
在这类场景中，selkirk-react-render-in-body 是一个非常有用的 npm 包，它可以让你轻松地将 React 组件渲染到页面的任何位置。
安装
你可以使用 npm 包管理器安装 selkirk-react-render-in-body：
npm install selkirk-react-render-in-body
如何使用
使用 selkirk-react-render-in-body 很简单。首先，你需要导入包。
import SelkirkReactRenderInBody from "selkirk-react-render-in-body";
接下来，你需要使用该包提供的 render 函数渲染你的组件。这个函数的第一个参数是你要渲染的组件，第二个参数是你希望渲染组件的 DOM 元素的 ID。
const MyComponent = () => <div>Hello, World!</div>; SelkirkReactRenderInBody.render( <MyComponent />, "root-container" );
在上面的示例中，我们定义了一个名为 MyComponent 的简单组件。然后，我们使用 render 函数将这个组件渲染到具有名称 root-container 的 DOM 元素中。
也可以使用 render 函数传递一个可选的第三个参数，该参数是一个 DOM 元素 (而不是它的 ID)，用于指定要将组件渲染到哪个 DOM 元素中。
-- -------------------- ---- ------- ----- ----------- - -- -- ----------- ------------- ----- ------------- - ------------------------------------------ -------------------------------- ------------ --- ----- ------------- --
在这个示例中，我们将 DOM 元素传递给 render 函数，而不是 ID。
限制
selkirk-react-render-in-body 有几个限制，包括:
- 无法与 React 路由一起使用
- 无法在已经渲染为 React 组件的 DOM 元素中再次渲染
结论
使用 selkirk-react-render-in-body，你可以轻松地将 React 组件渲染到文档的任何位置。它不仅易于使用，而且功能强大。希望这篇文章能够帮助你了解如何使用 selkirk-react-render-in-body 渲染 React 组件。
完整示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------------------ ---- -------------------------------
----- --------- - --------------------------------------
----- ----- ------- --------------- -
------------------ -
-------------
------- - ------------------------------
-
------------------- -
-------------------------------
-
---------------------- -
-------------------------------
-
-------- -
------ ----------------------
---- ----------------------------------------------
-------
--
-
-
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ---------- ----- --
--------------- - ---------------------------
---------------- - ----------------------------
-
------------ -
--------------- ---------- ---- ---
-
------------- -
--------------- ---------- ----- ---
-
-------- -
----- ----- - -------------------- - -
-------
---- -------------------------
---------- -----------
------- -----------------------------------------
------
---- -----------------------
------- -- - ----- ------ --------
------
--------
- - -----
------ -
-----
------- ------------------------------ --------------
-------
---------------------------------
----------- -------------
----------------
---
------
--
-
-
-------------------- --- ---------------------------------
在这个示例中，我们使用 SelkirkReactRenderInBody 渲染一个简单的 div 到 root-container 元素中，同时也渲染了一个 React 模态框。在点击 Show modal 按钮时，模态框会显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590b81e8991b448d677f