如何在React框架中使用SpreadJS
如何在React框架中使用SpreadJS，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
創(chuàng)新互聯(lián)是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開發(fā)，軟件開發(fā)，微信小程序開發(fā)，十余年建站對(duì)成都混凝土攪拌罐等多個(gè)行業(yè)，擁有多年的網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)。
第1步：設(shè)置HTML5頁面
首先，我們需要在頁面中添加對(duì)React的引用：
SpreadJS React Demo
在這個(gè)頁面中，我們將使用Babel的預(yù)編譯版本（稱為babel-standalone），因此我們也會(huì)添加一個(gè)對(duì)此的引用：
最后，添加對(duì)Spread.Sheets的引用：
第2步：為Spread.Sheets創(chuàng)建一個(gè)React類
接下來，在頁面中添加一個(gè)腳本元素。我們將把所有的代碼放在這里：
然后，為Spread.Sheets定義一個(gè)React組件，以便我們可以定義一個(gè)擴(kuò)展React.Component的類：
class ReactSpreadJS extends React.Component{
}該類需要在其中定義componentDidMount和render函數(shù)。componentDidMount函數(shù)在組件被掛載后立即被調(diào)用，所以我們用它來初始化Spread實(shí)例：
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);
}
}接下來，在渲染函數(shù)中定義Spread.Sheets DOM元素：
render() { //Define the Spread.Sheets DOM template return(
);
}
第3步：為組件創(chuàng)建一個(gè)應(yīng)用程序類
首先，通過App類定義應(yīng)用程序React組件：
//Define the application react component. class App extends React.Component{
}接下來，添加一個(gè)您將調(diào)用ReactSpreadJS組件的渲染函數(shù)：
render(){ //In the root component, it include one ReactSpreadJS component. return( {console.log(spread)}}> )
}
要完成腳本，請(qǐng)告訴React通過使用ReactDOM.render來初始化應(yīng)用程序：
ReactDOM.render( //Main entry, initialize application react component. , document.getElementById('root')
);
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。
本文題目：如何在React框架中使用SpreadJS
網(wǎng)站鏈接：
http://weahome.cn/article/ihdjid.html
重慶分公司
重慶分公司
