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
相关内容 (Related content)
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