Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use createClass of React". In daily operation, I believe many people have doubts about how to use createClass of React. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use createClass of React". Next, please follow the editor to study!

Before using React.createClass, let's take a look at the official explanation.

ReactClass createClass (object specification)

Create a component class that gives a description (the description given is its parameter object specification). This component implements a render method, and the render method returns a single node. The returned node may contain a child node structure of any depth. This method differs from standard prototype classes in that you do not need to use new to instantiate objects. These components are well encapsulated and can create background instances for you.

Of course, looking at these definitions alone, I don't know how to use the createClass method (I don't think my translation is standard enough). So let's explain how to use React.createClass () directly through an example.

Example one

Var Root = React.createClass ({

Render:function () {

Return (

Trace memory blog

);

}

});

ReactDOM.render (

Document.getElementById ('content')

);

This is a simple example. Simple as it is, there are two things to pay attention to.

The first point is that the Root initials of life must be capitalized, which means that if we write Root as root, it will be parsed directly into html tags (). Let's take a look at the following code (the following code is wrong)

Var root = React.createClass ({

Render:function () {

Return (

Trace memory blog

);

}

});

ReactDOM.render (

Document.getElementById ('content')

);

The results of the analysis are as follows

Obviously, this is not what we want.

The second point is that there can be only one root node in a component created by createClass. This root node can have child nodes of any layer. Let's take a look at the following code

Var Root = React.createClass ({

Render:function () {

Return (

Trace memory blog

Www.onmpw.com

);

}

});

ReactDOM.render (

Document.getElementById ('content')

);

There is also an error in this code, and the following error will be reported during the parsing process

SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (22:18) 20 | return (21 | blog > 22 | www.onmpw.com | ^ 23 |); 24 |}, 25 |}); ("+ loc.line+": "+ loc.column+") "; var err=new SyntaxError (message); err.pos=pos;err....

So if we want to achieve the above desired results, we can add another layer of nodes outside H1 and a. As follows

Example two

Var Root = React.createClass ({

Render:function () {

Return (

Trace memory blog

Www.onmpw.com

);

}

});

ReactDOM.render (

Document.getElementById ('content')

);

This ensures that there is only one root node in a component and achieves the effect we want.

In fact, for render, this method returns a React component tree, and the variable name used to accept the component tree must be capitalized. And the component tree can only have one root node, which is also in line with the actual situation. Eventually the component tree will be rendered as a HTML tag by ReactDOM.render.

For the tag in example 2, it is not a real DOM node, but a virtual DOM node. You can think of these nodes in the component tree as tags or data, but React knows what to do with them.

In fact, there are many knowledge points about React.createClass. Here I just briefly introduce the problems that should be paid attention to in the process of using it.

At this point, the study on "how to use the createClass of React" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.