前言
在 React 的开发中，我们经常需要根据条件渲染不同的组件。而在条件逻辑比较复杂的情况下，传统的三目运算符和 if..else 语句会使得代码变得难以维护。React-then-else npm 包提供了一种更加优雅的方式来进行条件渲染，使得代码更加清晰易懂。
安装
React-then-else 包可以使用 npm 进行安装。我们可以在项目目录下，使用以下命令来安装：
npm install react-then-else --save
使用
当我们完成安装后，就可以在代码中引用 react-then-else 包。我们可以使用 Then 和 Else 组件来进行条件渲染。
Then
Then 组件可以接受任何 React 组件作为参数。当条件满足时，Then 组件会渲染该组件。以下是 Then 组件的使用示例：
-- -------------------- ---- -------
------ - ---- - ---- ------------------
-------- ----------------------- -
------ -
-----
----- ----------------------------
------------- -- ---------
-------
------
--
-在上述示例中，当 condition 为 true 时，Then 组件会渲染 h1 标签。
Else
Else 组件与 Then 组件类似，也可以接受任何 React 组件作为参数。当条件不满足时，Else 组件会渲染该组件。以下是 Else 组件的使用示例：
-- -------------------- ---- -------
------ - ---- - ---- ------------------
-------- ----------------------- -
------ -
-----
----- ----------------------------
------------- -- ---------
-------
----- ----------------------------
------------- -- ----------
-------
------
--
-在上述示例中，当 condition 为 true 时，Then 组件会渲染 h1 标签，否则 Else 组件会渲染 h1 标签。
复杂条件渲染
当实现复杂的条件渲染时，可以将多个 Then 和 Else 组件连接起来。连接的顺序很重要，应该从上到下按照条件优先级排列。以下是一个复杂的条件渲染示例：
-- -------------------- ---- -------
------ - ----- ---- - ---- ------------------
-------- ----------------------- -
------ -
-----
----- -----------------------------
------------- - -- ---------
-------
----- -----------------------------
------------- - -- ---------
-------
------
----------- --------- - --- --------- - -- ---------
-------
------
--
-在上述示例中，如果 conditionA 为 true，则渲染 Condition A is true；如果 conditionB 为 true，则渲染 Condition B is true；否则，渲染 Neither condition A nor condition B is true。
总结
React-then-else npm 包提供了一种优雅的方式来进行条件渲染，使得代码更加简洁易懂。我们可以使用 Then 和 Else 组件来实现条件渲染，将多个组件连接起来实现复杂的条件渲染。希望这篇文章对你有所启发，可以用于你的日常开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005519b81e8991b448cef5a