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

This article mainly introduces "how to use the React.createElement method". In the daily operation, I believe that many people have doubts about how to use the React.createElement method. 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 the React.createElement method". Next, please follow the editor to study!

React.createElement

First of all, 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 either a html tag name string or a ReactClasss. This type parameter is required for createElement. The second parameter is the attribute of the tag, which is optional. The third parameter is the child node of the element, which is also optional.

Let's make a brief introduction to the first parameter type respectively.

The type parameter is the name of the html tag

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

Example one

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 simple. The first parameter is the name of the html tag, ul and li. We look at the second parameter and the third parameter of the first three createElement, because the second parameter is not needed, but we need the third parameter as the text content of the li, that is, the child content of the li, so the second parameter is assigned to null.

But for the createElement method that creates the ul element, the first parameter is the html tag name ul, and the second parameter is a props object {className: 'my-list'}. Of course, we can also add other attributes such as {className: 'my-list', name:'ulname'} here. 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. Whether or not createElement has more than three parameters, there are as many parameters as the node has as many child nodes after the second parameter. You can think of it that way, but if we modify the above example a little bit, we can see that it is not a problem to say that createElement has three parameters.

Example two

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 the array, so that the third parameter is an array, and the elements in the array are all the children of that node.

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

The parameter type is ReactClass

Let's look at the example above, where the type parameter is the name of the html tag. The method is actually quite easy to use, with the second parameter and the third parameter to be noted. Let's take a look at how to use the type type ReactClass.

Example 3

Var cli = React.createClass ({

Render:function () {

Return (

{this.props.text}

)

}

})

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 second parameter of the createElement of the first three li, add key:'value'. The value here is different from each other. If you do not specify this property-- although it can be displayed logically-- you will report the following warning.

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

Of course, if we create only one li element in the above example, there is no child2 and child3, only child1, then the key attribute of the second parameter must also be specified, otherwise it will also report the same warning as above.

For example 3, we can also rewrite the following

Example 4

Var cli = React.createClass ({

Render:function () {

Return (

{this.props.children}

)

}

})

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')

);

The third parameter is also specified in createElement and referenced using this.props.children in createClass.

The above is the use of React.createElement, we can see that its use is very flexible, in the actual production, we should choose a way suitable for our own convenient and fast development.

At this point, the study on "how to use the React.createElement method" 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.