介绍
在网格中呈现数据可能很麻烦，尤其是在 React 等框架中。为了解决这个问题，在本指南中，我们将讨论如何安装和使用React Data Grid（一种轻量级、类似 Excel 的网格组件，能够呈现大量数据），并查看其在项目中的实际实现。
安装
要安装react-data-grid，请在项目的根目录中运行以下命令。
$ npm install --save react-data-grid
导入 React 数据网格
您可以使用import语句轻松导入 React Data Grid 组件。
import ReactDataGrid from 'react-data-grid';
使用最低配置
以下是如何以最低配置使用 React Data Grid。
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={3} />
道具
您可以在<ReactDataGrid />组件内部传递许多 props来修改网格，但这三个是渲染网格必须传递的必需props。
- columns是一个对象数组，代表网格中的每一列。
const columns = [
{ key: "id", name: "ID" },
{ key: "name", name: "Name" },
{ key: "amount", name: "Amount" }
];
name是列的名称，key作为每列的唯一标识符。
rowGetter是一个函数，它调用rows数组中的每个对象并将它们呈现为网格的一行。
rowGetter={i => rows[i]}
- rowsCount是要呈现的行数。
如果您想将每个元素呈现为一行，它应该等于行数组内元素的总数。
如果行数组中的元素数量少于该数量，则从数组的索引 0 开始呈现该数量的元素。
如果数组元素超过rows，则渲染所有数组元素。
如果您想渲染没有任何行的网格，可以将其设置为0 。
完整代码：
import React from "react";
import ReactDataGrid from "react-data-grid";
export default function DataGrid() {
const columns = [
{ key: "id", name: "ID" },
{ key: "name", name: "Name" },
{ key: "amount", name: "Amount" }
];
const rows = [
{ id: 0, name: "row1", amount: 10 },
{ id: 1, name: "row2", amount: 20 },
{ id: 2, name: "row3", amount: 30 }
];
return (
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={3}
/>
);
}
例子
在实际项目中，您可能需要通过 API 调用请求要呈现的数据。
此示例将使用Rick and Morty API，这是一个基于 REST/GraphQL 的免费 API，可提供有关 Rick and Morty 电视节目的人物、剧集和地点的信息。
此示例将使用Episode端点。以下是该端点响应的架构：
| 钥匙 | 类型 |
|---|---|
| ID | 整数 |
| 姓名 | 细绳 |
| 播出日期 | 细绳 |
| 插曲 | 细绳 |
| 人物 | 数组（url） |
| 网址 | 字符串（网址） |
| 创建 | 细绳 |
以下是如何制作端点响应网格的方法：
- 首先，您需要从/episode端点请求数据；一种方法是在useEffect()钩子中使用fetch()并将数据存储在状态变量中。提供一个空数组作为useEffect()的第二个参数可确保仅在初始渲染后发出请求。
const [data, setData ] = useState([]);
useEffect(() => {
fetch("https://rickandmortyapi.com/api/episode/")
.then(res => res.json())
.then(data => setData(data.results));
}, []);
- 现在，您需要定义网格的列。根据响应的架构，您可以选择要呈现的字段。
const columns = [
{ key: "id", name: "ID" },
{ key: "name", name: "Name"},
{ key: "air_date", name: "Air Date"},
{ key: "episode", name: "Episode" },
];
- 作为最后一步，您需要在rowGetter中提供来自端点的数据，该数据存储在状态变量中。
<ReactDataGrid
columns={columns}
rowGetter={i => data[i]}
rowsCount={data.length}
minHeight={800}
/>
minHeight是另一个可用于设置网格高度的道具。
这样，您就成功创建了一个由从 API 端点收到的信息组成的网格。
结论
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
