React的createFactory怎么使用

本文小编为大家详细介绍“React的createFactory怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“React的createFactory怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

下面我们先看官网解释

React.createFactory

factoryFunction createFactory(
  string/ReactClass type
)

上面函数返回一个用于生成给定类型的ReactElement的函数，类似于 React.createElement。对于type参数可以是html标签名字（例如：“div”，“li”等），也可以是ReactClass对象。

以上就是官网上面的createFactory的说明，但是对于这个方法的使用，官网上面并没有具体的例子。对于这个方法的概念的说明，我觉得还是官网上的比较权威。我在这里只对createFactory的使用进行说明。

type参数为html标签名字

首先我们来看官网上的一个例子

例一

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

这个例子通过createElement方法创建了两个li标签，然后通过createElement方法创建了ul标签，并将li标签添加为ul的子节点。关于createElement的使用各位可以参考官网的解释

下面我们通过createFactory来修改这个例子

例二

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

当然，ul也可以通过创建一个工程方法来生成ul标签，但是在我们这个例子中只有一次ul的创建，所以我们可以通过createElement来创建ul元素。当然我们可以再生成一个ul的工厂方法用于生成ul元素，代码如下

例三

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

除此之外，React还为HTML标签提供了内置的工厂方法 React.DOM.HtmlTag。同样我们使用内置的工厂方法修改上面的例子

例四

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

同样的对于li元素我们也可以使用内置的工厂方法，代码如下

例五

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

这样的代码看起来是不是更简单。

以上所有就是指定参数类型为html标签名字的工厂方法的使用。下面我们看使用指定参数类型为ReactClass的使用方法。

type参数为ReactClass

同样我们通过指定参数为ReactClass对例一进行改写。代码如下

例六

var cli = React.createClass({
    render: function(){
        return (
            <li>
                {this.props.text}
            </li>
        );
    }
});
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')
);

在上面的例子中，通过使用ReactClass的方式创建li的工厂方法，在生成li元素的时候不能再使用下面的情况

var child1 = factory(null,'First Text Content');
var child2 = factory(null,'Second Text Content');

因为如果使用这样的方式，虽然可以创建成功li元素，但是li中的文本并没有被生成。所以我们需要借助props来生成其文本。

同样对于ul元素，我们也可以使用ReactClass的方式先生成工厂方法，然后再使用工厂方法创建ul元素。使用方法是相同的，在这里我就不再举例子了。

读到这里，这篇“React的createFactory怎么使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。