SpreadJS 文档
SpreadJS 文档 / 开发者指南 / JavaScript框架 /在React中使用 SpreadJS
在本主题中
    在React中使用 SpreadJS
    在本主题中

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

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

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

    1. 使用Node包管理器
    2. 使用传统HTML

    使用Node包管理器

    此方法涉及以下步骤:

    1. 创建一个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

    2. 在项目中安装SpreadJS React模块

      接下来,您需要使用以下命令在项目中安装 @grapecity/spread-sheets-react:

      npm install @grapecity/spread-sheets-react
             
    3. 将SpreadJS CSS导入index.js文件

      接下来,您需要使用以下代码将SpreadJS CSS导入index.js文件中:

      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
             
    4. 在React应用程序中使用SpreadJS

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

      JavaScript
      复制代码
      import React, { Component } from 'react';
      import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';
      import GC from '@grapecity/spread-sheets';
      var SpreadJSKey = "xxx";
      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

    此方法涉及以下步骤:

    1. 下载React HTML模板

      您可以使用链接下载react HTML模板 https://reactjs.org/docs/getting-started.html

    2. 将SpreadJS和React-SpreadJS添加到HTML模板

      添加引用 gc.spread.sheets.all.*.*.*.min.js,  gc.SpreadJS.*.*.*.css and gc.spread.sheets.react.*.*.*.js 文件到 HTML 模板 (i.e. 你的 index.html 文件)。

    3. 在React应用程序中使用SpreadJS

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

      JavaScript
      复制代码
      <!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>

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