在前端开发中，我们经常需要根据不同的条件来展示不同的内容，这时 @the-/ui-condition 这个 npm 包就能派上用场了。本篇文章将介绍如何使用 @the-/ui-condition 实现条件渲染，并提供代码示例供参考。
安装
你可以使用 npm 或 yarn 进行安装：
npm install --save @the-/ui-condition
yarn add @the-/ui-condition
使用
@the-/ui-condition 提供了 <Condition> 组件，我们可以在组件内部传入条件参数，然后根据条件来渲染不同的内容。
假设我们要根据用户是否登录来显示不同的页面：
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------- - ---- --------------------
-------- ----- ---------- -- -
------ -
---------- ----------------
--------------------
---------------
------------
-
-在上面的代码中，当 isLoggedIn 参数为 true 时，<Condition> 组件会渲染第一个 <div>，否则渲染第二个 <div>。
我们还可以使用 <Condition> 的 whenTruthy 和 whenFalsy 属性来指定需要渲染的内容：
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------- - ---- --------------------
-------- ----- --------- ----- -- -
------ -
---------- ------------- --------------------- ------- --------
------------------
------------
-
-在上面的代码中，当 hasItems 为真时，将渲染 <>{/*...*/}</> 中的内容，否则将渲染第二个 <div>。
高级使用
除了最基本的条件渲染外，@the-/ui-condition 还支持很多其他高级用法。下面是一些常见场景示例：
渲染区间值
当我们需要根据取值渲染不同的内容时，可以使用 <Range> 组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----- - ---- --------------------
-------- ----- ----- -- -
------ -
------ -------- --------
----- ------- -----
--------
------ --------- --------
----- ------- ----
--------
------ --------- ---------
----- ------- ----
--------
-
-在上面的代码中，<Range> 组件会根据 score 的值来进行条件渲染。
分组渲染
当我们需要根据多个不同的条件来进行分组渲染时，可以使用 <When>、<Otherwise> 和 <Choose> 组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- ---------- ---- - ---- --------------------
-------- ----- ---- -- -
------ -
--------
----- -------- --- -----------
------- -------------------------------------
-------
----- -------- --- ----------
------- ------------------------------------
-------
-----------
---------------------
------------
---------
-
-在上面的代码中，<Choose> 组件会根据 type 参数的不同值来选择不同的渲染结果。
总结
@the-/ui-condition 提供了灵活强大的条件渲染功能，可以在前端开发中大大简化我们的工作流程。在本文中，我们介绍了其基本用法和高级用法，相信你已经掌握了如何使用该 npm 包实现条件渲染。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-ui-condition