在前端开发中，我们经常需要对不同的设备尺寸进行适配。为了方便开发者处理这个问题，我们现在介绍一款 npm 包 react-media-resize，来解决 React 应用在不同尺寸设备上的适配问题。
安装 react-media-resize
在终端输入以下命令进行安装：
npm install react-media-resize
如何使用 react-media-resize
首先，我们需要在项目中引入 React 和 react-media-resize 这两个库：
import React, { Component } from 'react';
import { Media } from 'react-media-resize';然后，我们就可以在 React 组件中使用 Media 这个组件了。Media 组件是一个用于根据设备尺寸显示不同内容的组件，我们可以在其 props 中传入不同的参数和回调函数来控制显示内容和样式。
下面是 Media 组件的基本结构：
-- -------------------- ---- -------
------ ------------------ --------
-------- --
------- - -
---- -- - ------ ----------
- - -
---- -- - ------- ----------
-
-
--------在上面的代码中，我们定义了一个 Media 组件，传入了一个 query 参数，表示其在什么样的尺寸下会执行哪些行为。在上面的示例中，如果设备的屏幕宽度小于等于 768px，就显示“我是移动设备”这段文字，否则就显示“我是桌面设备”这段文字。
我们还可以在 Media 组件的 props 中传入一个 onChange 回调函数，当设备尺寸发生改变时，这个回调函数就会被调用，我们可以在这个回调函数中改变组件的状态和样式。
下面是一个带有 onChange 回调函数的 Media 组件示例：
-- -------------------- ---- -------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
-------- -----
--
-
-------------------------- -
---------------
-------
---
-
-------- -
----- - ------- - - -----------
------ -
------
----------------- -- --------------------------------
------------------ -------
-
-------- --
------- - -
---- -- - ------ ----------
- - -
---- -- - ------- ----------
-
-
--------
--
-
-在上面的代码中，我们定义了一个名为 handleMediaChange 的回调函数，当设备尺寸发生改变时，Media 组件会调用它。这个回调函数会根据当前设备尺寸改变组件的状态，而组件的状态又反过来影响它的呈现方式。
注意事项
- react-media-resize 只能在 React 项目中使用，不兼容纯 HTML/CSS/JS 项目。
- Media 组件的 query 参数必须是一个合法的 CSS 媒体查询字符串。
- Media 组件的 children 必须是一个函数，且返回值为 React 组件或 JSX 元素。
- Media 组件的 onChange 回调函数是可选的，不传入时组件不会有任何响应式行为。
总结
使用 react-media-resize 可以方便地根据设备尺寸适配 React 应用，同时也可以让我们更好地理解响应式设计的原理和实现方式。
无论你是初学者还是有经验的开发者，都可以通过 react-media-resize 来提高自己的开发效率和学习成果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668181e8991b448e2a70