在前端开发中，我们经常需要根据不同的条件来显示或隐藏某些元素。为了方便处理这样的逻辑，我们可以使用一个叫做 react-show-at 的 npm 包。
安装 react-show-at
首先，在你的 React 项目中安装 react-show-at：
npm install react-show-at --save
示例
让我们来看一个简单的示例，假设我们有一组数据，每个数据包含一个名字和一个年龄。我们想要显示只有年龄大于等于 18 的数据，而其他数据则隐藏。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
------ -------- ---- ----
------ ------ ---- ----
------ -------- ---- ----
--
--
-
-------- -
----- -------- - --------------------------- -- -
------- --------------- ------------ -- ----
---------- -----------------
--------- ----------------
---------
---
------ ----------------------
-
-
------ ------- ---------如上述示例所示，我们使用了 ShowAt 组件来包裹要显示/隐藏的内容。并将其 at 属性设置为一个布尔值，当该布尔值为 true 时，ShowAt 组件会呈现其包含的内容，反之，则隐藏其包含的内容。
此外，ShowAt 组件还包含一个名为 "delay" 的属性，可以设置是否延迟呈现其内容，以达到动画效果。默认值为 0。
除此之外，我们还可以使用常见的运算符，例如：
<ShowAt at={value > 10 && value < 20}>...</ShowAt>
<ShowAt at={value === 'foo' || value === 'bar'}>...</ShowAt>
<ShowAt at={array.includes(value)}>...</ShowAt>高级示例
接下来，让我们看一个稍微复杂一些的示例。我们需要确保当用户拥有管理员权限时，才能看到某些菜单项。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------
----- ---- - -
----- --------
-------- -----
--
----- ---- ------- --------------- -
-------- -
----- --------- - -
------ ------- ---- -----
------ ---------- ---- ------------
------ -------- ---- ----------
--
----- ----------------- - ----------------------- --
--------------- -- ------------
--
------ -
-----
----------------------------- -- -
-- --------------- ----------------
-----------
----
---
------
--
-
-
------ ------- -----如上述示例所示，我们首先定义了一个名为 "user" 的对象，其中包含一个属性 "isAdmin"，表示用户是否具有管理员权限。接着，我们定义了一个名为 "Menu" 的组件，其中包含了一个菜单项数组。我们使用 filter 方法来过滤掉那些需要管理员权限才能看到的菜单项，最后将过滤后的菜单项呈现出来。
总结
到此为止，我们已经掌握了 react-show-at 包的基本用法和高级用法。它可以帮助我们轻松实现在 React 中的元素显示/隐藏逻辑，提高我们开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd481e8991b448e66aa