溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何在React框架中使用SpreadJS，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
首先，我們需要在頁面中添加對React的引用：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>SpreadJS React Demo</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> </head> </html>
在這個頁面中，我們將使用Babel的預編譯版本（稱為babel-standalone），因此我們也會添加一個對此的引用：
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
最后，添加對Spread.Sheets的引用：
<script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.11.0.0.min.js"></script> <link rel="stylesheet" type="text/css" href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.11.0.0.css">
在我們編寫任何腳本之前，我們需要定義一個DIV元素來包含Spread實例。我們稱之為“root”。
<div id="root"></div>
接下來，在頁面中添加一個腳本元素。我們將把所有的代碼放在這里：
<script type="text/babel"> </script>
然后，為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(
<div ref="spreadJs" style={{width:'100%',height:'100%'}}>);
}首先，通過App類定義應用程序React組件：
//Define the application react component. class App extends React.Component{
}接下來，添加一個您將調用ReactSpreadJS組件的渲染函數：
render(){ //In the root component, it include one ReactSpreadJS component. return( <div style={{width:'800px',height:'600px'}}> <ReactSpreadJS workbookInitialized = {(spread)=>{console.log(spread)}}> </ReactSpreadJS> </div> )
}要完成腳本，請告訴React通過使用ReactDOM.render來初始化應用程序：
ReactDOM.render( //Main entry, initialize application react component. <App/>, document.getElementById('root')
);看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
