Shulou(Shulou.com)06/01 Report--

How to use SpreadJS in the React framework, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

Step 1: set up the HTML5 page

First, we need to add a reference to React to the page:

SpreadJS React Demo

On this page, we will use a precompiled version of Babel (called babel-standalone), so we will also add a reference to this:

Finally, add a reference to Spread.Sheets:

Before we can write any scripts, we need to define a DIV element to contain the Spread instance. We call it "root".

Step 2: create a React class for Spread.Sheets

Next, add a script element to the page. We will put all the code here:

Then, define a React component for Spread.Sheets so that we can define a class that extends React.Component:

Class ReactSpreadJS extends React.Component {}

This class needs to define the componentDidMount and render functions in it. The componentDidMount function is called immediately after the component is mounted, so we use it to initialize the Spread instance:

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);}}

Next, define the Spread.Sheets DOM element in the render function:

Render () {/ / Define the Spread.Sheets DOM template return ();} step 3: create an application class for the component

First, define the application React components through the App class:

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

Next, add a rendering function that you will call the ReactSpreadJS component:

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

To complete the script, tell React to initialize the application by using ReactDOM.render:

ReactDOM.render (/ / Main entry, initialize application react component. , document.getElementById ('root'); is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.