前言
在 React 开发中，我们常常需要根据条件来渲染不同的组件或者 UI。而且这样的需求在实际中十分常见。如果每次都要手写一遍条件判断逻辑，将会极其繁琐且低效。为了解决这个问题，社区中出现了许多优秀的 npm 包，其中就包括了我们今天要介绍的 conditional-react-component。通过使用这个 npm 包，可以实现对 React 组件的条件渲染，提高工作效率。
安装
首先，在使用这个 npm 包之前，我们需要先将它安装到我们的项目中。可以通过以下命令来进行安装：
$ npm install conditional-react-component --save
使用
conditional-react-component 使用起来非常简单，它只需要一个对象 map 和一个条件值作为参数。我们来看一下使用示例：
-- -------------------- ---- -------
------ ----------- ---- ------------------------------
-- ----------------------
----- ------------ - -
-- ----------- ---
-- ----------- ---
-- ----------- --
--
-------- ----- -
----- -------------- - ----
------ -
-----
------------
------------------
--------------------------
--------------------------- ---
--
------
--
-上面代码中，通过判断条件值来渲染对应的组件，当未找到对应的组件时，通过 fallback 参数来渲染一个默认组件。接下来，我们来详细了解一下 conditional-react-component 的各种参数以及使用方法。
API
Conditional props
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| map | object | 一个用于实现条件判断渲染的组件 Map，key 为条件值，value 为对应的组件 | |
| condition | string | 条件值字符串 | |
| fallback | node | null | 当没有找到对应的组件时显示的自定义组件。如果不需要显示任何内容，可以设置为 null 或者忽略不设置 |
代码解释
map: 一个用于实现条件判断渲染的组件 Map。在这里，我们可以看到它是一个对象，key 值对应条件变量，value 对应渲染的组件。condition: 条件值。表示当前需要条件判断的值。fallback: 当没有找到对应的组件时显示的自定义组件。提供了一个默认组件，如果没有找到任何组件，则会默认渲染这个组件。
细节说明
懒加载
在 React 当中进行组件的条件渲染的时候，我们有时候需要根据条件去加载不同的组件，但是在首屏渲染过程当中加载非常耗时。所以，这个 npm 包提供了一个懒加载机制。在 map 参数当中，我们可以传递一个函数，这个函数会返回一个即将要渲染到页面上的组件。这样做的好处是：当以后需要渲染到页面的时候才进行加载和解析，可以优化页面的首屏加载速度，提升用户体验。示例如下：
-- -------------------- ---- -------
------ ----------- ---- ------------------------------
------ -------- ---- -----------------
-- --------
----- ------------- - -- -- -
------ -
----------
----------- --
-----------
-
-
----- ------------ - -
-- -------------- ---
-- ----------- ---
-- ----------- --
--在这个示例中，我们使用了第三方 React 懒加载库 react-lazyload 来实现对组件的懒加载。
高阶组件
你也可以用高阶组件的方式来使用该条件渲染组件。注意：必须返回一个 React 组件。 示例代码如下：
-- -------------------- ---- -------
------ ----------- ---- ------------------------------
-------- --------------------------------------- -
----- ------------ - -
-- ----------- ---
-- ----------- ---
-- ----------- --
--
----- ----------------- - -- --------------- -------- -- -- -
------ -
------------
------------------
--------------------------
-------------------
--
--
--
------ ----------------- -- ---------------- -- --------------
- -- -- -
------------------
-------------------------------
----------------------------
-
----------------- --
--------------------
-
- -----------------
-
-- -------
----- --- - ------------------------ -- -
------ ------- ----- ---------
---在上述示例代码中，我们使用了一个高阶组件，将原本需要在组件内使用的字段放到了外部。当然，我们也可以将这个高阶组件进行独立处理，作为一个工具类，方便以后的复用。
总结
本文介绍的 conditional-react-component 包极大的提高了 React 中条件渲染的效率，使用也非常简单。在这里，我们希望通过这篇介绍，给大家提供了一些使用的技巧和参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd581e8991b448dd605