Reactアプリケーションにリボンコンテナを追加するには、次の手順を実行します。

1. コマンドプロンプトで次のコマンドを実行して、Reactアプリを作成します。

   コマンドプロンプト	コードのコピー
   npm install -g create-react-app create-react-app designercomponent cd designercomponent npm start

   
   
2. リボンコンテナを使用するには、以下の必要なSpreadJSのパッケージをインストールします。

   コマンドプロンプト

   コードのコピー

   npm install @grapecity/spread-excelio npm install @grapecity/spread-sheets npm install @grapecity/spread-sheets-barcode npm install @grapecity/spread-sheets-charts npm install @grapecity/spread-sheets-languagepackages npm install @grapecity/spread-sheets-pdf npm install @grapecity/spread-sheets-print npm install @grapecity/spread-sheets-shapes npm install @grapecity/spread-sheets-resources-ja npm install @grapecity/spread-sheets-pivot-addon npm install @grapecity/spread-sheets-designer npm install @grapecity/spread-sheets-designer-resources-ja npm install @grapecity/spread-sheets-react npm install @grapecity/spread-sheets-designer-react

   
   
3. 次のサンプルコードを使用して、App.jsファイルに必要なモジュールをインポートします。

   App.js	コードのコピー
   import '@grapecity/spread-sheets-designer-resources-ja'; import {Designer} from '@grapecity/spread-sheets-designer-react'; import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css' import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'

   
   
4. 次のサンプルコードを使用して、リボンコンテナを表示します。

   App.js	コードのコピー
   function App() { return ( <Designer styleInfo = {{width: "1500px", height: '90vh'}}></Designer> ); } export default App;

   
   
5. アプリケーションを実行します。

   コマンドプロンプト	コードのコピー
   npm start

SpreadJSインスタンスにアクセスする

designerInitializedイベントを使用してSpreadJSインスタンスにアクセスすることができます。designerInitializedイベントを使用するには、前項の手順 1 ～ 3を完了してから、次の手順を実行します。

4. 次のサンプルコードを使用して、リボンコンテナを描画してSpreadJSインスタンスをアクセスします。

   JavaScript	コードのコピー
   function App() { return (  <Designer designerInitialized={designer => { getDesigner(designer) }}  styleInfo={{ width: "100%", height: '98vh' }}></Designer > ); } // リボンコンテナを取得する関数 function getDesigner(designer) { // ホストされたSpreadJSインスタンスです。 var workbook = designer.getWorkbook(); var sheet = workbook.getActiveSheet(); sheet.setValue(1, 1, 'Test'); }

   
   

ライセンスキーを設定する

React使用時は、SpreadJS、リボンコンテナのほか、ExcelIOに対してもライセンスキーの設定が必要となります。ExcelIOのライセンスキーにはSpreadJSのライセンスキーを設定します。

import React from 'react';
import '@grapecity/spread-sheets-designer-resources-ja';
import * as GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-designer';
import {Designer} from '@grapecity/spread-sheets-designer-react';
import * as ExcelIO from "@grapecity/spread-excelio";
 
var sjsLicense = "sjs-distribution-key";
GC.Spread.Sheets.LicenseKey = sjsLicense;
ExcelIO.LicenseKey = sjsLicense;
 
GC.Spread.Sheets.Designer.LicenseKey = " designer-component-distribution-key ";