在现代 Web 开发中，前端技术框架和库极其丰富和多样化，许多开发者为了能够更快地开发和构建应用程序，利用第三方工具和库提高了开发效率。其中一个非常流行的工具就是 npm 包。npm（Node Package Manager）是 Node.js 官方指定的包管理器，允许开发者在项目中快速下载和安装 Javascript 代码库，并允许在代码中引用它们。在本篇文章中，我们将会讨论 npm 包 relay-gallery 的使用教程。
什么是 relay-gallery？
relay-gallery 是一种 React 的图片展示组件，可以很容易地在网格布局中展示图片，并且在不同视口宽度下灵活地调整布局。它使用 Relay 和 GraphQL 进行数据交互，并且容易自定义风格。relay-gallery 贴合现代 Web 应用的趋势，尤其是在构建视觉化 Web 应用时，它可以大幅提高应用的质量和开发效率。
安装 relay-gallery
要安装 relay-gallery，请运行以下命令：
npm install relay-gallery
使用 relay-gallery
首先，需要引入 react-relay 和 graphql 包。在使用 relay-gallery 时，需要提供具有以下结构的 data：
-- -------------------- ---- -------
-
-------- -
-
------- -
----- ----
------ ----------------------------------
-------- ----
--------- ---
-
--
-
------- -
----- ----
------ ----------------------------------
-------- -----
--------- ---
-
--
-
------- -
----- ----
------ ----------------------------------
-------- ----
--------- ---
-
--
---
-
-在 React 应用程序中，可以直接将其 pass 到 relay-gallery 的 props。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------------
------ ------------ ---- ----------------
----- --------- ------- --------------- -
-------- -
------ -
------------- ---------------------- --
--
-
-
------ ------- -------------------------------- -
---------- -
----- -- -- ---------
-------- -- --------- -
----- -
---- -
--
---
-----
------
-
-
-
-
-
---这里使用 Relay.createContainer 传递从服务器端数据获取的 data 属性。可以在 fragments 字段中定义 GraphQL 查询语句，并在组件中使用 query 去获取数据。
-- -------------------- ---- -------
----- -------------- -
--------- -
----- -
---- -
--
---
-----
------
-
-
-
-在 Relay 中，query 可以在应用程序中使用 props 传递给 React 组件。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------------
------ --------- ---- --------------------
----- --- ------- --------------- -
-------- -
------ -
--------------------
---------------------
---------- -----------------
--
--
-
-
----- -------------- ------- ----------- -
------ --------- - -----------------
------ ------- - -
----- -- -- ---------
----- -
--------- -
--------------------------------
-
-
--
--
-
------ ------- ----在此例中，Relay.RootContainer 接收一个 route 属性，该属性管理应用程序中所有查询的流程。MyGalleryRoute 类扩展了 Relay.Route 并定义了应该查询的 MyGallery 数据。应用程序中的 MyGallery 组件引用了在 fragment 中定义的查询中的 data 属性。
现在，我们已经将 MyGallery 组件包含在应用程序中，并设置了查询返回的 data 属性。接下来，我们将该 data 属性传递给 RelayGallery 组件。
配置 Gallery
RelayGallery 组件有以下可选属性：
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| data | Object |
true | The gallery data to display. Must match the Relay.QL fragment illustrated above. |
|
| cellWidth | Number |
150 |
false | The initial width for each image cell in the gallery. |
| cellHeight | Number |
150 |
false | The initial height for each image cell in the gallery. |
| maxCols | Number |
6 |
false | The maximum number of columns to display in the gallery. |
| minCols | Number |
3 |
false | The minimum number of columns to display in the gallery. |
| margin | Number |
10 |
false | The margin between each image cell in the gallery. |
| onClickImage | Function |
null |
false | The callback function to handle clicking on an image stack in the gallery. |
| onClickImageSet | Function |
null |
false | The callback function to handle clicking on an image set in the gallery. |
| onNewCellsRequested | Function |
null |
false | The callback function to handle scrolling and request new image cells from the server. |
| cellRenderer | Function |
null |
false | A custom cell renderer for images in the gallery, which returns a specialized React component. |
| renderAdditional | Function |
null |
false | A specialized React component to be rendered after the images. |
| className | String |
null |
false | A class name to be added to the gallery container element. |
| style | Object |
{} |
false | Additional styles to apply to the gallery container element. |
| zoomButtonClass | String |
null |
false | A class name to be added to the zoom button icon element. |
| zoomButtonSVG | ReactElement |
null |
false | A specialized SVG component to be rendered for the zoom button. |
| zoomButtonStyle | Object |
{} |
false | Additional styles to apply to the zoom button element. |
| zoomButtonSrc | String |
null |
false | A URL to an image to display for the zoom button. |
这个应该足以解释如何为你的项目使用 relay-gallery！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005525a81e8991b448cfdf7