React-portal-with-classes 是一个基于 React 的 npm 包，可以将组件渲染到 DOM 结构之外的 Portal 中。Portal 组件提供了一种渲染子组件到其他位置的方式，而不是在父组件的 DOM 层级中插入它们。
这对于需要在 modal、popover、tooltip 或者全屏应用中使用的组件非常有用，特别是在应用需要使用多个 Z-index 时更加方便。在这篇文章中，我们将对 React-portal-with-classes 进行详细介绍，并提供一些示例代码。
如何安装 React-portal-with-classes？
React-portal-with-classes 是基于 npm 的一个包，因此，可以通过以下命令来安装它：
npm install react-portal-with-classes --save
这将会将 react-portal-with-classes 安装到你的项目中，并将其添加到依赖中。在你的应用程序中，可以通过以下方式来使用它：
import Portal from 'react-portal-with-classes';
ReactDOM.render(
<Portal isOpened={true}>
<h1>Hello, World!</h1>
</Portal>,
document.getElementById('root')
);如何使用 React-portal-with-classes？
以下是一个简单的 React-portal-with-classes 例子，我们将渲染一个按钮，点击之后展示一个模态框窗口：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------ ---- ----------------------------
----- ----- ------- --------- -
-------- -
----- ------ - -
---- ------------------
---- --------------------------
---------------------
------
------
--
------ -
------- ------------------------------ ----------------
--------------------
---------
-
-
-
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
--------- -----
--
---------------- - ----------------------------
-
------------- -
--------------- --------- -------------------- ---
-
-------- -
----- ------ - -
-------
-------------
---------------------------
---- -----
---------
--
------ -
-----
------
------------------------------
-----------------
---------- -----------
--------
------
--
-
-
----------------
------------ ---
-------------------------------
--在上述代码中，我们首先定义了一个 Modal 组件，然后定义了一个 Application 组件，它可以使用这个 Modal。
在 Modal 组件中，我们定义了一个 portal，它是一个表示模态框的 DOM 元素。在 render 中，我们将 portal 传递给了 Portal 组件，并使用 isOpened 属性来控制是否展示 Modal。
在 Application 中，我们首先定义了一个按钮触发 Modal。然后我们在 render 中将这个按钮和 Modal 渲染出来，使用 isOpened 状态来控制 Modal 是否展示。
总结
React-portal-with-classes 是一个非常有用的 npm 包，在渲染需要在 DOM 结构之外的 Portal 中的组件时非常方便。在本文中，我们深入了解了 React-portal-with-classes，并提供了示例代码，希望对你的学习和使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cc281e8991b448da5fd