如何使用 NPM 安装 React Data Grid

2020-07-30 08:00:00 · 飞浪

介绍在网格中呈现数据可能很麻烦，尤其是在React等框架中。为了解决这个问题，在本指南中，我们将讨论如何安装和使用ReactDataGrid（一种轻量级、类似Excel的网格组件，能够

介绍

在网格中呈现数据可能很麻烦，尤其是在 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 端点收到的信息组成的网格。

结论

本指南介绍了出色的 React Data Grid 库。您可以使用和自定义网格的许多功能，如单元格格式、过滤、排序、分组等。而且由于这是一个开源项目，您甚至可以创建自定义功能并将它们合并到官方库中。

React Data Grid 非常适合以表格形式显示大量数据。您甚至可以在诸如电子商务平台之类的附带项目中使用它，其中可以使用 React Data Grid 呈现库存、客户信息等。

您可以在官方文档中阅读有关此内容的更多信息。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何使用 NPM 安装 React Data Grid

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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} /> ); }

钥匙

类型

整数

姓名

细绳

播出日期

细绳

插曲

细绳

人物

数组（url）

网址

字符串（网址）

创建

细绳

const [data, setData ] = useState([]); useEffect(() => { fetch("https://rickandmortyapi.com/api/episode/") .then(res => res.json()) .then(data => setData(data.results)); }, []);