react-conditional-display 是一个 React 组件，可以方便地根据条件渲染组件，并提供一些额外的功能，例如切换 CSS 类。
安装
要使用 react-conditional-display，我们需要先在项目中安装它。使用 npm 可以很容易地完成这个任务：
--- ------- -------------------------
使用
要使用 react-conditional-display，我们需要引入它，并将它包含在 JSX 中。让我们来看一个简单的例子以便了解其基本用法。
------ ------------------ ---- ----------------------------
-------- ----- -
----- ----------- - -----
------ -
-----
------------------- -----------------
------- --------- -- ---- --------- -- ----------- -- ---------
---------------------
------
--
-在这个例子中，我们定义了一个变量 isDisplayed，并将其设置为 true。我们随后使用这个变量作为 if 属性的值来渲染一个段落，这个段落只有在 isDisplayed 的值为 true 的时候才会被渲染。
我们可以改变变量 isDisplayed 的值来切换该段落的显示和隐藏。例如，通过将 isDisplayed 设置为 false 来隐藏段落：
-------- ----- -
----- ----------- - ------
------ -
-----
------------------- -----------------
------- --------- -- ---- --------- -- ----------- -- ---------
---------------------
------
--
-高级用法
react-conditional-display 还支持以下高级用法：
切换 CSS 类
要在条件变更时切换 CSS 类，我们可以使用 className 属性。例如：
-------- ----- -
----- ----------- - -----
------ -
-----
------------------- ---------------- ----------------------
------- --------- -- ---- --------- -- ----------- -- ---------
---------------------
------
--
-在这个例子中，我们使用了 className 属性来添加了一个名为 displayed 的 CSS 类，该 CSS 类只在 isDisplayed 的值为 true 时才会被应用。
多条件渲染
如果我们需要同时满足多个条件才渲染组件，可以使用一个数组来包含这些条件。例如：
-------- ----- -
----- -------- - -----
----- -------- - -----
------ -
-----
------------------- -------------- -----------
------- --------- -- ---- --------- -- --- ---- -- ------ -- --- -- ---- ----- -- ---------
---------------------
------
--
-在这个例子中，我们使用了一个数组来包含 hasItems 和 loggedIn，只有当这些条件都为 true 时，段落才会被渲染。
通过函数进行条件渲染
如果我们需要在一些较为复杂的条件下渲染组件，我们可以使用一个函数来定义这个条件。例如：
-------- ----- -
----- ----- - --- -- -- -- ---
------ -
-----
------------------- ------ -- ------------ - ---
------- --------- -- ---- --------- -- -- ---- ----- -- ---------
---------------------
------
--
-在这个例子中，我们使用了一个函数来定义了条件，该条件返回一个值来表示是否满足条件。在这个例子中，如果数组 items 的长度大于 0，则会渲染该段落。
进一步学习
以上是使用 react-conditional-display 的基础知识，你可以用它来根据条件渲染组件并使用一些功能。如果你对这个包的更多功能感兴趣，可以阅读它的文档，以了解更多有关如何使用和定制 react-conditional-display 的信息。
------ ----- ---- --------
------ ------------------ ---- ----------------------------
-------- ----- -
----- ----------- - -----
------ -
-----
------------------- ---------------- ----------------------
------- --------- -- ---- --------- -- ----------- -- ---- --- ---- - ----- -- --- --------
---------------------
------
--
-
------ ------- ----来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600560b181e8991b448def50