简介
在使用 React 进行开发的过程中，我们经常会遇到需要根据状态不同而展示不同的组件的需求。在传统的开发中，我们会使用 if\else 或是 switch\case 等判断语句来实现不同状态下的不同组件展示。但是当我们的状态较多时，判断语句的层数就会逐渐增多，不仅让代码变得冗长，而且可读性也会大打折扣。
为了解决这个问题，社区里出现了一些针对这种场景的解决方案，其中就包括我们今天要介绍的 npm 包 react-switch_case，它能够帮助我们快速实现根据不同状态展示不同组件的功能，并且代码非常简洁。
安装
在开始使用 react-switch_case 之前，我们需要先安装它。我们可以使用 npm 或是 yarn 进行安装，在命令行中输入：
npm install react-switch_case # 或是 yarn add react-switch_case
使用
react-switch_case 提供了一个 Switch 组件，用来管理我们的状态和不同状态下需要展示的组件。下面我们就来看一下如何使用它。
渲染单个组件
我们可以把 Switch 组件当做一个分类器，用来判断我们的状态。在 Switch 内部，我们可以通过 Case 组件来指定某种状态下需要渲染的组件。例如：
-- -------------------- ---- -------
------ - ------- ---- - ---- --------------------
------ -------------- ---- -------------------
------ --------------- ---- --------------------
-------- --------- ----- -- -
------ -
------- --------------
----- --------------
--------------- --
-------
----- ---------------
---------------- --
-------
---------
--
-在上面的例子中，我们使用了 Switch 组件来判断 state 的值，并且通过 Case 组件来指定在不同的状态下需要渲染的组件。这样，当 state 为 "first" 时，就会渲染 FirstComponent 组件，当 state 为 "second" 时，就会渲染 SecondComponent 组件。
渲染多个组件
除了渲染单个组件外，我们还可以通过 Case 组件来指定多个组件的渲染方式。例如：
-- -------------------- ---- -------
------ - ------- ---- - ---- --------------------
------ -------------- ---- -------------------
------ --------------- ---- --------------------
------ -------------- ---- -------------------
-------- --------- ----- -- -
------ -
------- --------------
----- --------------
--------------- --
-------
----- ---------------
---------------- --
--------------- --
-------
---------
--
-在上面的例子中，当 state 为 "second" 时，就会同时渲染 SecondComponent 和 ThirdComponent 组件。
默认值
我们还可以通过 DefaultCase 组件来指定一个默认的组件，当我们的状态不符合任何一个 Case 组件的条件时，就会渲染默认组件。例如：
-- -------------------- ---- -------
------ - ------- ----- ----------- - ---- --------------------
------ -------------- ---- -------------------
------ --------------- ---- --------------------
------ ---------------- ---- ---------------------
-------- --------- ----- -- -
------ -
------- --------------
----- --------------
--------------- --
-------
----- ---------------
---------------- --
-------
-------------
----------------- --
--------------
---------
--
-在上面的例子中，当 state 不为 "first" 并且不为 "second" 时，就会渲染 DefaultComponent 组件。
结语
使用 react-switch_case 可以帮助我们快速地实现根据不同状态展示不同组件的功能，避免了传统方式中冗长且难以维护的判断语句。当然，使用此包不仅需要对 React 有基本的理解，同时对条件渲染有比较深刻的认识，这样才能更好地使用这个包。
最终的示例代码请见：https://github.com/haomofan/example-react-switch_case。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057add81e8991b448eb660