在 React 中使用 SpreadJS

SpreadJS支持React-一个JavaScript库，允许开发人员通过处理MVC框架的视图层为Web应用程序和移动应用程序构建用户界面。

使用React，您可以在创建可重用组件和大型应用程序时修改数据而无需重新加载页面。

type=warning
注意：SpreadJS 支持 React 16,17 以及 18.

SpreadJS可以通过以下两种方式与React一起使用：

使用Node包管理器

此方法涉及以下步骤：

创建一个React项目
打开命令提示符窗口，然后键入以下命令：
```
npm install -g create-react-app
create-react-app quick-start
cd quick-start
npm start    
```
完成后，将在目录中的指定位置创建react项目。有关如何创建React项目的更多信息，请参阅https://reactjs.org/docs/create-a-new-react-app.html
在项目中安装SpreadJS React模块
接下来，您需要使用以下命令在项目中安装 SpreadJS 组件：
```
npm install @grapecity-software/spread-sheets
npm install @grapecity-software/spread-sheets-react
```
将SpreadJS CSS导入index.js文件
接下来，您需要使用以下代码将SpreadJS CSS导入index.js文件中：
```
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
```

在React应用程序中使用SpreadJS

现在，您可以根据需要修改App.js文件。刷新浏览器窗口时，变更将反映出来。例如，您可以使用下面给出的示例代码：

import React, { Component } from 'react';
import { SpreadSheets, Worksheet, Column } from '@grapecity-software/spread-sheets-react';
import * as GC from "@grapecity-software/spread-sheets";

// 设置 SpreadJS License
// var SpreadJSKey = "xxx";          // 输入一个有效的 License key.
// GC.Spread.Sheets.LicenseKey = SpreadJSKey;

class APP extends Component {
  constructor(props) {
    super(props);
    this.spreadBackColor = 'aliceblue';
    this.sheetName = 'Goods List';
    this.hostStyle =
    {
      width: '800px',
      height: '600px'
    };
    this.data = [
      {
        Name: "Apple",
        Category: "Fruit",
        Price: 1,
        "Shopping Place": "Wal-Mart",
      },
      {
        Name: "Potato",
        Category: "Fruit",
        Price: 2.01,
        "Shopping Place": "Other",
      },
      {
        Name: "Tomato",
        Category: "Vegetable",
        Price: 3.21,
        "Shopping Place": "Other",
      },
      {
        Name: "Sandwich",
        Category: "Food",
        Price: 2,
        "Shopping Place": "Wal-Mart",
      },
      {
        Name: "Hamburger",
        Category: "Food",
        Price: 2,
        "Shopping Place": "Wal-Mart",
      },
      {
        Name: "Grape",
        Category: "Fruit",
        Price: 4,
        "Shopping Place": "Sun Store",
      },
    ];
    this.columnWidth = 100;
  }
  render() {
    return (
      <div>
        <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle}>
          <Worksheet name={this.sheetName} dataSource={this.data}>
            <Column dataField='Name' width={300}></Column>
            <Column dataField='Category' width={this.columnWidth}></Column>
            <Column dataField='Price' width={this.columnWidth}
              formatter="$#.00"></Column>
            <Column dataField='Shopping Place' width={this.columnWidth}></Column>
          </Worksheet>
        </SpreadSheets>
      </div>
    )
  }
}
export default APP

使用传统HTML

此方法涉及以下步骤：

下载React HTML模板
您可以使用链接下载react HTML模板https://reactjs.org/docs/getting-started.html
将SpreadJS和React-SpreadJS添加到HTML模板
添加引用 gc.spread.sheets.all....min.js, gc.SpreadJS....css and gc.spread.sheets.react...*.js 文件到 HTML 模板 (i.e. 你的 index.html 文件)。

在React应用程序中使用SpreadJS

现在，您可以在React应用程序中使用SpreadJS。例如，您可以使用下面给出的示例代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
     <title>Hello World</title>
     <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
     <script src="./lib/gc.spread.sheets.all.*.*.*.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./lib/gc.spread.sheets.excel2013white.*.*.*.min.css">
 <script src="./lib/gc.spread.sheets.react.*.*.*.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {SpreadSheets, Worksheet, Column} = window.SpreadSheetsComponents;
class App extends React.Component{
render(){
  return(
     <div style={{width: '800px',height: '600px'}}>
       <SpreadSheets>
        <Worksheet name='first'>
        <Column dataField="Name"/>
             </Worksheet>
             </SpreadSheets>
             </div>
             )
     }
 }
 ReactDOM.render(
         <App/>,
         document.getElementById('root')
      ); 
</script>
</body>
</html>

SpreadSheets，Worksheet和Column是具有标签层次结构的基本元素。其他元素通过设置来起作用。主要标签层次为：

<SpreadSheets>
   <Worksheet>
      <Column>
      </Column>
      ...
   </Worksheet>
   ...
</SpreadSheets>

以下主题列出了标签指令。

type=warning
注意：要在 SpreadJS 与 React 中使用 ExcelIO 元素，您需要单独导入 Excel IO 模块并使用相同的许可密钥进行授权，更多详细信息请参阅 Excel IO 元素的相关文档。