然後，為Spread.Sheets定義一個React組件，以便我們可以定義一個擴展React.Component的類：

 class ReactSpreadJS extends React.Component{ }

該類需要在其中定義componentDidMount和render函數。componentDidMount函數在組件被掛載後立即被調用，所以我們用它來初始化Spread實例：

 componentDidMount() { //In the DidMount life cycle, we initialize Spread Sheet instance, and the host is defined in the Component template. let spread = new GC.Spread.Sheets.Workbook(this.refs.spreadJs, {sheetCount: 3});  if(this.props.workbookInitialized){ this.props.workbookInitialized(spread); } }

接下來，在渲染函數中定義Spread.Sheets DOM元素：

 render() { //Define the Spread.Sheets DOM template return( 
 
); }

第3步：為組件創建一個應用程序類

首先，通過App類定義應用程序React組件：

 //Define the application react component. class App extends React.Component{ }

接下來，添加一個您將調用ReactSpreadJS組件的渲染函數：

 render(){ //In the root component, it include one ReactSpreadJS component. return( 
 {console.log(spread)}}>   
 ) }

要完成腳本，請告訴React通過使用ReactDOM.render來初始化應用程序：

 ReactDOM.render( //Main entry, initialize application react component. , document.getElementById('root') );

這就是使用React將Spread.Sheets添加到HTML頁面所需的全部內容。這只是React和Spread.Sheets的基本使用，但可以輕鬆擴展。

關於SpreadJS前端表格控件

是基於 HTML5 的 JavaScript 電子表格和網格功能控件，適用於.NET、Java 、Web應用程序、移動端等多種平臺的表格數據處理和類Excel功能的表格程序開發。全中文操作界面，零學習成本！便於您在系統開發過程中，更安全的管理Excel 數據，更快捷的完成海量數據交互，更方便的進行數據導出、導入、排序、過濾、增刪改查、可視化及Excel 導入/導出等操作。SpreadJS自面世以來，備受華為、中通、中國民航飛行學院、中國平安 、中國能建、浪潮等國內知名企業客戶青睞。

閱讀更多 葡萄城GrapeCity 的文章

關鍵字: 軟件 乾貨 腳本語言