JIYIK CN >

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

ReactClass createClass(object specification)

Create a component class with a given specification (the specification is the object specification). This component implements a render method that returns a single node. The returned node may contain child nodes of arbitrary depth. This method differs from the standard prototype class in that it does not use new to instantiate objects. These components are well encapsulated and can create background instances for you.

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

In this article, we only implement the render method and introduce the issues that should be paid attention to. The detailed introduction of object specification involves the detailed description of components and knowledge of life cycle, which we will not introduce in this article.

Example 1

var Root = React.createClass({
    render:function(){
        return (
          <h1>迹忆博客</h1>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

This is a simple example. Although it is simple, there are two points to note.

The first point is that the first letter of the word Root must be capitalized. That is to say, if we write Root as root, then <root /> will be directly parsed into an HTML tag (<root></root>). Let's look at the following code (the following code is wrong)

var root = React.createClass({
    render:function(){
        return (
          <h1>迹忆博客</h1>
        );
    },
});
ReactDOM.render(
        <root />,
        document.getElementById('content')
);

The results of the analysis are as follows

<root data-reactid=".0"></root>

Obviously this is not the result we want.

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

var Root = React.createClass({
    render:function(){
        return (
          <h1>迹忆博客</h1>
          <a>www.jiyik.com</a>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

This code also has errors. 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 | <h1>迹忆博客</h1> > 22 | <a>www.jiyik.com</a> | ^ 23 | ); 24 | }, 25 | }); ...("+loc.line+":"+loc.column+")";var err=new SyntaxError(message);err.pos=pos;err....

Therefore, if we want to achieve the above desired results, we can add another layer of nodes outside h1 and a.

Example 2

var Root = React.createClass({
    render:function(){
        return (
          <div>
            <h1>迹忆博客</h1>
            <a>www.jiyik.com</a>
          </div>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

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

In fact, for render, this method will return a React component tree. The variable name used to receive the component tree must have a capital letter. And the component tree can only have one root node, which is also in line with the actual situation. In the end, this component tree will be rendered into HTML tags by ReactDOM.render.

For the <div> 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 some tags or data, but React knows how to handle these tags or data.

In fact, there are many knowledge points about React.createClass. Here I will just briefly introduce the issues that should be paid attention to during use.

I hope this helps you all.