随着各种设备尺寸逐渐增多，响应式设计（responsive design）已经成为前端开发不可或缺的一环。而容器查询（container query）则是一种让我们可以在组件内部进行条件渲染的方式。@boardom/react-container-query 是一款支持容器查询的 React 组件库。本文将介绍如何使用 @boardom/react-container-query。
安装
使用 npm 安装即可：
npm install @boardom/react-container-query
基本用法
@boardom/react-container-query 提供了 ContainerQuery 组件，我们可以在组件内部使用该组件进行容器查询。 ContainerQuery 需要传入一个查询列表（array of objects）作为属性，每个对象包含一个 key 字段和一个 query 字段，表示我们要查询的条件。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- ---------------------------------
----- ------- - -
-
---- -----
------ -
--------- --------
--
--
-
---- -----
------ -
--------- --------
--
--
-
---- -----
------ -
--------- ---------
--
--
--
----- ----------- - -- -- -
--------------- ------------------
------- -- -
-----
----------- ------------
----
------- ---------- - ------ - -------------
------- ---------- - ------ - -------------
------- ---------- - ------ - -------------
-----
------
--
-----------------
--上述代码中，我们定义了一个 queries 列表，包含三个查询条件：当容器宽度不小于 320px 时，使用 sm 样式；当容器宽度不小于 768px 时，使用 md 样式；当容器宽度不小于 1024px 时，使用 lg 样式。在实际渲染中，ContainerQuery 会将当前容器的宽度和查询条件进行比较，并将结果作为 params 属性传入内部的子组件。子组件可以根据 params 属性来渲染不同的 UI。
更多查询条件
除了 minWidth，@boardom/react-container-query 还支持其他查询条件：
maxWidth: 容器最大宽度minHeight: 容器最小高度maxHeight: 容器最大高度minAspectRatio: 容器最小长宽比maxAspectRatio: 容器最大长宽比orientation: 容器方向（portrait或landscape）
我们可以将多个查询条件组合在一起使用。
-- -------------------- ---- -------
----- ------- - -
-
---- -----
------ -
--------- --------
---------- --------
--
--
-
---- -----
------ -
--------- --------
--------- ---------
---------- --------
--
--
-
---- -----
------ -
--------- ---------
------------ ------------
--
--
--基于样式的查询
除了将查询条件硬编码到 JS 中，@boardom/react-container-query 还支持基于样式的查询。我们可以在 CSS 中定义 @container 规则，在查询列表中指定一个 CSS 类名，然后在渲染时设置容器的 className。这样，查询与样式就可以一一对应了。
-- -------------------- ---- -------
---------- ----------- ------ -
------------- -
----------- -----
-
-
---------- ----------- ------ --- ----------- ------- -
------------- -
----------- -----
-
-
---------- ----------- ------- --- ------------- ---------- -
------------- -
----------- -----
-
--- -------------------- ---- -------
----- ----------- - -- -- -
--------------- ------------------------ ------------------
------- -- -
---- ------------------------ ----------- - -------------- - --- ----------- - -------------- - ------
----------- ------------
----
------- ---------- - ------ - -------------
------- ---------- - ------ - -------------
------- ---------- - ------ - -------------
-----
------
--
-----------------
--总结
@boardom/react-container-query 是一款功能强大的容器查询库，它为我们提供了一种在组件内部进行条件渲染的方法。本文介绍了 @boardom/react-container-query 的基本用法以及更高级的查询方法。通过学习本文的内容，读者可以更好地利用 @boardom/react-container-query 进行前端开发，并实现更加灵活的响应式设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a830d09270238226d5