前言
在前端开发中，我们通常需要根据不同设备或不同屏幕大小展现不同的界面或交互效果。针对不同的设备或屏幕大小写不同的代码，这种做法显然是效率低下的。而使用媒体查询可以解决这个问题，但媒体查询的写法有时过于冗长，也存在可维护性差的风险。于是，我们可以使用 npm 包 react-media-hoc，来方便地实现媒体查询。
react-media-hoc 介绍
react-media-hoc 是一个基于 React 的高阶组件，可以让我们更加方便地书写媒体查询，并根据媒体查询结果，动态地渲染组件。其主要功能如下：
- 基于媒体查询，在不同的屏幕尺寸下渲染不同的组件
- 可以指定多个媒体查询，并使用布尔逻辑计算它们
- 支持使用默认组件
安装
安装 react-media-hoc：
npm install react-media-hoc --save
使用方法
- 导入并使用 withMedia HOC
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ------------------
----- ---------- - -- -- -------------- --------
----- ---------- - -- -- -------------- --------
----- ------------------ - -----------
--------- -------
---------------
----- ------- - -- -- -
------ ------------------- ---
--withMedia 是一个高阶组件，接受一个配置对象作为参数，其中可以指定媒体查询条件和默认组件。在上面的例子中，我们指定了一个媒体查询条件 maxWidth: '599px'，也就是屏幕宽度小于等于 599px 时使用 ComponentA 组件。
- 使用不同的媒体查询条件
const ComponentWithMedia = withMedia({
minWidth: '600px',
maxWidth: '1199px'
})(ComponentA);在这个例子中，我们指定了两个媒体查询条件。当屏幕宽度在 600px 到 1199px 之间时，使用 ComponentA 组件。
- 使用布尔逻辑对多个媒体查询条件进行计算
-- -------------------- ---- -------
----- ------------------ - -----------
--------- --------
--------- --------
---------------
----- ------------------- - -----------
--------- --------
---------------
----- ------- - -- -- -
------ -
-----
------------------- -- --------------------
------
--
--在这个例子中，我们先分别定义两个使用不同媒体查询条件的组件。随后，在 Example 组件中，使用布尔逻辑计算两个媒体查询条件的结果，并呈现符合条件的组件。
- 使用默认组件
const ComponentWithMedia = withMedia({
maxWidth: '599px'
}, null, ComponentB)(ComponentA);在这个例子中，我们指定了一个使用默认组件的条件，即当媒体查询结果为 false 时使用 ComponentB 组件。
总结
使用 react-media-hoc，我们可以更加便捷地书写媒体查询，并根据媒体查询结果动态渲染组件。这个 npm 包的精妙设计，在大幅提高代码的可读性和可维护性的同时，也给前端开发者带来了更好的开发体验和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e781e8991b448d78cf