reactjs运行原理（如何创建SpreadJS的React项目）
点击“了解更多”获取SpreadJS v14.0正式版下载
概述SpreadJS 纯前端表格控件 V11.2(SP2) 已经全面支持了 React 的拓展。接下来我们看下如何利用 3 分钟快速创建一个 SpreadJS 的 React 项目。
1. 新建 React 项目（耗时 1 Min）
直接运行：npx create-react-app react-spread-sheets
还不清楚 npx？ 请点击这里了解一下《What Isnpx》。
cd react-spread-sheets
npm start
访问 http://localhost:3000 查看效果
2. 导入 Spread.Sheets React 组件（耗时 30 S）
js npm install @grapecity/spread-sheets-react
如果您需要 excel 导入/导出、chart 图表、打印或者 pdf 导出功能，可以选择导入相应的 SpreadJS 组件，具体请点击这里查看。
3. 页面添加 Spread.Sheets 元素（耗时 30 S）
导入Spread.Sheets
import {SpreadSheets, Worksheet, Column} from '@grapecity/spread-sheets-react';
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
添加构造器
constructor(props){
super(props);
this.hostStyle =
{
left: "20px",
right: "20px",
position: "absolute",
textAlign: "left"
};
var self = this;
this.workbookInitialized = function(workbook){
self.spread = workbook;
console.log(workbook.getSheetCount());
}
}
添加模板
<div style={this.hostStyle}>
<SpreadSheets workbookInitialized={this.workbookInitialized}></SpreadSheets>
</div>
4.启动 Npm（耗时 1 Min）
workbookInitialized 是 spread 初始化完成后的回调事件，我们可以在事件中得到初始化好的 workbook 对象。
添加部署授权需要同时给 Sheets 和 ExcelIO 同时添加，部署授权可以在全局 config 中配置。
只需 3 分钟，一个 SpreadJS 的 React 项目就创建完成了，当然纯前端表格控件 SpreadJS 的强大不仅于此，去实际试用感受一下吧！
本文转载自葡萄城
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
