前言
在前端开发中，响应式设计已经成为了一个必需品，而基于媒体查询的 CSS 响应式设计技术也越来越普遍。但是，媒体查询在 React 组件中使用起来并不方便。因此，今天我们来介绍一个能够方便地在 React 组件中使用媒体查询的 npm 包：mq-react。
mq-react 是什么？
mq-react 是一个能够方便地在 React 组件中使用媒体查询的 npm 包。使用 mq-react，你可以通过 React props 或者 classnames 来控制组件在不同媒体查询状态下的样式。
安装 mq-react
使用 npm 安装 mq-react。
npm install mq-react --save
使用 mq-react
首先，我们需要导入 mq-react。
import { mq } from 'mq-react';接着，我们就可以使用 mq-react 提供的 API 来创建支持媒体查询的 React 组件了。
使用 mqReact(Component: React.ComponentClass | React.FunctionComponent)
mqReact 是一个高阶函数，用于创建支持媒体查询的组件。通过 mqReact 可以将带有媒体查询样式的组件包装一下，使其支持媒体查询。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- ------------ - ---- -----------
--------- ----- -
----- -------
-
----- ---------- ---------------- - -- ---- -- -- ------------------
------ ------- ------------- -
--------------------- -
--------- -------
--
---------------------- -
--------- -------
--
--------------------- -
--------- -------
--
---上面的代码中，我们用了 mqReact 包装了一个简单的组件，同时在组件的 props 中添加了 text。mqReact 的第一个参数是我们要包装的组件，第二个参数是我们要使用的媒体查询样式。
这里我们使用了 mq-react 内置的 MediaQueries，它包含了三种媒体查询：Small、Medium 和 Large。当组件在不同媒体查询状态下时，它的字体大小会随之变化。
使用 props
除了使用 mqReact 包装组件外，我们还可以通过 props 来设置组件的媒体查询样式。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- ------------ - ---- -----------
--------- ----- -
----- -------
-
----- ---------- ---------------- - -- ----- ------- -- -- -
----
--------
--------- -------
----------- -- - --------- ------ ---
--
-
------
------
--
------ ------- ----------上面的代码中，我们用了一个布尔类型的 isSmall prop 来控制组件的媒体查询样式。在组件的 style 中，我们可以使用 ES6 的语法来设置条件样式。
使用 classnames
如果你的组件使用了 classnames，那么也可以使用 mq-react 提供的 classNames API 来控制组件的媒体查询样式。
-- -------------------- ---- -------
------ ---------- ---- -------------
------ ----- ---- --------
------ - ------------- ---------- -- ------------ - ---- -----------
--------- ----- -
----- -------
----------- -------
-
----- ---------- ---------------- - -- ----- --------- -- -- -
---- -------------------------------- -------------- --------- ------ -- - --------------------- - --------- ------ - -----
------
------
--
------ ------- ----------上面的代码中，我们使用了 classNames 和 mqClassNames 两个函数。通过 mqClassNames，我们可以设置组件在不同媒体查询状态下的样式。
总结
通过上面的介绍，我们已经了解了如何使用 mq-react 来在 React 组件中使用媒体查询。mq-react 提供了两种使用方式，可以通过 mqReact 包装组件来实现，也可以使用 props 或者 classnames 来控制组件的媒体查询样式。在实际开发中，我们可以根据需要选择不同的方式来使用 mq-react，从而更方便地实现响应式设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3e81e8991b448db073