JIYIK CN >

When you see the createElement method, you will naturally think of document.createElement(). Yes, the names of these two methods are the same. However, here we are going to introduce React.createElement() instead of document.createElement().

Let’s get straight to the point

React.createElement

First, let’s look at the official explanation.

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

The React.createElement method creates and returns a ReactElement element of a given type. The type parameter can be a string of an html tag name or a ReactClasss. The type parameter is required for createElement. The second parameter is the attributes of the tag, which is optional. The third parameter is the child nodes of the element, which is also optional.

Below we will briefly introduce the first parameter type.

The type parameter is the HTML tag name

The type parameter can be an HTML tag name or a ReactClass. First, let's look at an example using HTML tags. This example comes from the official website, and all the following examples are rewritten around this example.

Example 1

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var child3 = React.createElement('li', null, 'Third Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2, child3);
ReactDOM.render(
        root,
        document.getElementById('content')
);

This example is very simple. The first parameter is the name of the HTML tag ul and li. Let's look at the second and third parameters of the first three createElements. Because the second parameter is not needed above, but the third parameter is needed as the text content of li, that is, the sub-content of li, so the second parameter is assigned null.

But for the createElement method that creates the ul element, the first parameter is also the HTML tag name ul, and the second parameter is a props object { className : 'my-list'}. Of course, we can also add other properties here, such as { className : 'my-list', name :'ulname'}. These properties can be called through this.props.name. But the strange thing is that there are multiple parameters after the second parameter. How to explain this? Is it that createElement has more than three parameters? From the second parameter onwards, there are as many parameters as there are child nodes of the node. You can think so, but if we slightly modify the above example, we can see that there is actually nothing wrong with saying that createElement has three parameters.

Example 2

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var child3 = React.createElement('li', null, 'Third Text Content');
var root = React.createElement('ul', { className: 'my-list' }, [child1, child2, child3]);
ReactDOM.render(
        root,
        document.getElementById('content')
);

We put all the parameters after the second parameter in an array, so that we can think of the third parameter as an array, and the elements in the array are all the child nodes of the node.

From this we can see that the use of React is actually very flexible.

The type parameter is ReactClass

In the example above, the type parameter is the HTML tag name. The usage is actually quite simple, but you need to pay attention to the second and third parameters. Next, let's look at the usage of type ReactClass.

Example 3

var cli = React.createClass({
    render:function(){
        return (
                <li>
                {this.props.text}
                </li>
        )
    }
})
var child1 = React.createElement(cli, {key:'F',text:'First Text Content'});
var child2 = React.createElement(cli, {key:'S',text:'Second Text Content'});
var child3 = React.createElement(cli, {key:'T',text:'Third Text Content'});
var root = React.createElement('ul', { className: 'my-list' }, [child1, child2, child3]);
ReactDOM.render(
        root,
        document.getElementById('content')
);

Here we see that the first parameter cli is the return value of createClass. It should be noted that for the first three li, the second parameter of createElement must add key:'value'. The values ​​here are different from each other. If this attribute is not specified - although it can be displayed normally according to the logic - the following warning will be reported

Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <ul>. See https://fb.me/react-warning-keys for more information.

Of course, if we only create one li element in the above example, with only child1 and no child2 or child3, then the key attribute of the second parameter must also be specified, otherwise the above warning will also be reported.

For Example 3, we can also rewrite it as follows

Example 4

var cli = React.createClass({
    render:function(){
        return (
                <li>
                {this.props.children}
                </li>
        )
    }
})
var child1 = React.createElement(cli, {key:'F'},'First Text Content');
var child2 = React.createElement(cli, {key:'S'},'Second Text Content');
var child3 = React.createElement(cli, {key:'T'},'Third Text Content');
var root = React.createElement('ul', { className: 'my-list' }, [child1, child2, child3]);
ReactDOM.render(
        root,
        document.getElementById('content')
);

Similarly, specify the third parameter in createElement and reference it in createClass using this.props.children.

The above is the usage of React.createElement. It can be seen that its usage is very flexible. In actual production, we should choose a method that suits us for convenient and quick development.