In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-02-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >
Share
Shulou(Shulou.com)05/31 Report--
In this article, the editor introduces in detail "how to use React's createFactory". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use React's createFactory" can help you solve your doubts.
Next, let's take a look at the official website to explain.
React.createFactory
FactoryFunction createFactory (
String/ReactClass type
)
The above function returns a function for generating a given type of ReactElement, similar to React.createElement. The type parameter can be a html tag name (for example, "div", "li", etc.) or a ReactClass object.
The above is the description of createFactory on the official website, but there are no specific examples on the official website for the use of this method. As for the explanation of the concept of this method, I think it is still more authoritative on the official website. I will only explain the use of createFactory here.
Type parameter is the name of the html tag
First, let's take a look at an example on the official website.
Example one
Var child1 = React.createElement ('li', null,' First Text Content')
Var child2 = React.createElement ('li', null,' Second Text Content')
Var root = React.createElement ('ul', {className:' my-list'}, child1, child2)
ReactDOM.render (root, document.getElementById (content))
This example creates two li tags using the createElement method, then creates the ul tags through the createElement method, and adds the li tags as child nodes of the ul. About the use of createElement, you can refer to the explanation on the official website.
Let's modify this example through createFactory
Example two
Var factory = React.createFactory ("li")
Var child1 = factory (null,'First Text Content')
Var child2 = factory (null,'Second Text Content')
Var root = React.createElement ('ul', {className:'my-list'}, child1,child2)
ReactDOM.render (
Root
Document.getElementById ('content')
);
Of course, ul can also generate ul tags by creating an engineering method, but in our example there is only one creation of ul, so we can create ul elements through createElement. Of course, we can regenerate a factory method of ul to generate the ul element, as follows
Example 3
Var factory = React.createFactory ("li")
Var child1 = factory (null,'First Text Content')
Var child2 = factory (null,'Second Text Content')
Var ulfactory = React.createFactory ('ul')
Var root = ulfactory ({className:'my-list'}, child1,child2)
ReactDOM.render (
Root
Document.getElementById ('content')
);
In addition, React provides a built-in factory method React.DOM.HtmlTag for HTML tags. Similarly, we use the built-in factory method to modify the above example
Example 4
Var factory = React.createFactory ("li")
Var child1 = factory (null,'First Text Content')
Var child2 = factory (null,'Second Text Content')
Var root = React.DOM.ul ({className:'my-list'}, child1,child2)
ReactDOM.render (
Root
Document.getElementById ('content')
);
Similarly, we can also use the built-in factory method for the li element, with the following code
Example 5
Var root = React.DOM.ul (
{className:'my-list'}
React.DOM.li (null,'First Text Content2')
React.DOM.li (null,'Second Text Content2')
);
ReactDOM.render (
Root
Document.getElementById ('content')
);
Does this kind of code look simpler?
All of the above is the use of factory methods that specify that the parameter type is the name of the html tag. Let's take a look at how to use the specified parameter type ReactClass.
The parameter type is ReactClass
Similarly, we rewrite example 1 by specifying the parameter ReactClass. The code is as follows
Example 6
Var cli = React.createClass ({
Render: function () {
Return (
{this.props.text}
);
}
});
Var factory = React.createFactory (cli)
Var child1 = factory ({text:'First Text Content'})
Var child2 = factory ({text:'Second Text Content'})
Var root = React.DOM.ul ({className:'my-list'}, child1,child2)
ReactDOM.render (
Root
Document.getElementById ('content')
);
In the above example, by creating a factory method for li using ReactClass, the following situation can no longer be used when generating the li element
Var child1 = factory (null,'First Text Content')
Var child2 = factory (null,'Second Text Content')
Because if you use this approach, although the li element can be created successfully, the text in the li is not generated. So we need to use props to generate its text.
Similarly for the ul element, we can also use the ReactClass method to create the factory method, and then use the factory method to create the ul element. The method of use is the same, so I won't give any more examples here.
After reading this, the article "how to use React's createFactory" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.