react创建动态表格_教程：使用React创建电子表格

最新推荐文章于 2024-08-12 08:33:55 发布

cuk0051

最新推荐文章于 2024-08-12 08:33:55 发布

阅读量2.5k

点赞数

文章标签： java python vue react js ViewUI

原文链接：https://flaviocopes.com/tutorial-react-spreadsheet/

版权

本文是一篇关于如何使用React创建动态表格的教程，通过构建一个可配置、可重用的电子表格组件，展示了React的强大功能。教程涵盖从创建基本表格到支持公式计算、性能优化和本地存储内容等步骤。在完成教程后，你将得到一个类似Google Sheets的可运行电子表格组件。

摘要由CSDN通过智能技术生成

react创建动态表格

Creating a stripped down version of a spreadsheet like Google Sheets is really a good example of showing many of the capabilities of React.

创建像Google Sheets这样的电子表格的精简版确实是展示React的许多功能的一个很好的例子。

At the end of this tutorial you’ll have a working, configurable, reusable spreadsheet React Component to power all your calculations 🙂

在本教程的最后，您将拥有一个可运行，可配置，可重用的电子表格React Component，以支持所有计算all

This tutorial covers the following topics for which I wrote dedicated guides:

本教程涵盖了以下主题，我为此撰写了专门的指南：

You might want to check them out to get an introduction to these topics if you’re new to them.

如果您不熟悉这些主题，则可能需要查看它们以获取对这些主题的介绍。

第一步 (First steps)

The code of this tutorial is available on GitHub at https://github.com/flaviocopes/react-spreadsheet-component

本教程的代码可从GitHub上的https://github.com/flaviocopes/react-spreadsheet-component获得。

First thing, we’re going to detail what we’re going to build. We’ll create a Table component that will have a fixed number of rows. Each row has the same number of columns, and into each column we’ll load a Cell component.

首先，我们将详细说明要构建的内容。我们将创建一个Table组件，该组件将具有固定的行数。每行具有相同数量的列，并且将在每个列中加载一个Cell组件。

We’ll be able to select any cell, and type any value into it. In addition, we’ll be able to execute formulas on those cells, effectively creating a working spreadsheet that won’t miss anything from Excel or Google Sheets 😏 </sarcasm>.

我们将能够选择任何单元格，并在其中键入任何值。此外，我们将能够在这些单元格上执行公式，从而有效地创建一个不会丢失Excel或Google Sheets😏 </sarcasm> sarcasm </sarcasm>内容的电子表格。

Here’s a little demo gif:

这是一个小样的gif：

The tutorial first dives into the basic building blocks of the spreadsheet, and then goes into adding more advanced functionality such as:

本教程首先介绍电子表格的基本构建块，然后再添加更多高级功能，例如：

adding the ability to calculate formulas
增加了计算公式的能力
optimizing performance
优化性能
saving the content to local storage
将内容保存到本地存储

建立一个简单的电子表格 (Build a simple spreadsheet)

If you don’t have create-react-app installed already, this is a good time to do that:

如果您尚未安装create-react-app ，那么现在是这样做的好时机：

npm install -g create-react-app

Then let’s start with

然后让我们开始

npx create-react-app spreadsheet
cd spreadsheet
npm start

and the React app will launch on localhost:3000:

然后React应用将在localhost:3000上启动：

This procedure creates a number of files in the spreadsheet folder:

此过程在spreadsheet文件夹中创建许多文件：

The one we should focus now is App.js. This file out of the box contains the following code:

我们现在应该关注的是App.js。该文件开箱即用包含以下代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and
          save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Let’s wipe out the bulk of this code and just replace it with a simple render of the Table component. We pass it 2 properties: x the number of columns and y the number of rows.

让我们抹掉这段代码的大部分内容，然后将其替换为Table组件的简单呈现。我们为它传递2个属性： x的列数和y的行数。

import React from 'react'
import Table from './components/Table'

const App = () =>
  (<div style={
    { width: 'max-content' }}>
    <Table x={4} y={4} />
  </div>)

export default App