React的createFactory怎么使用

本文小編為大家詳細(xì)介紹“React的createFactory怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“React的createFactory怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

下面我們先看官網(wǎng)解釋

React.createFactory

factoryFunction createFactory(
  string/ReactClass type
)

上面函數(shù)返回一個(gè)用于生成給定類型的ReactElement的函數(shù)，類似于 React.createElement。對(duì)于type參數(shù)可以是html標(biāo)簽名字（例如：“div”，“li”等），也可以是ReactClass對(duì)象。

以上就是官網(wǎng)上面的createFactory的說(shuō)明，但是對(duì)于這個(gè)方法的使用，官網(wǎng)上面并沒(méi)有具體的例子。對(duì)于這個(gè)方法的概念的說(shuō)明，我覺(jué)得還是官網(wǎng)上的比較權(quán)威。我在這里只對(duì)createFactory的使用進(jìn)行說(shuō)明。

type參數(shù)為html標(biāo)簽名字

首先我們來(lái)看官網(wǎng)上的一個(gè)例子

例一

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

這個(gè)例子通過(guò)createElement方法創(chuàng)建了兩個(gè)li標(biāo)簽，然后通過(guò)createElement方法創(chuàng)建了ul標(biāo)簽，并將li標(biāo)簽添加為ul的子節(jié)點(diǎn)。關(guān)于createElement的使用各位可以參考官網(wǎng)的解釋

下面我們通過(guò)createFactory來(lái)修改這個(gè)例子

例二

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

當(dāng)然，ul也可以通過(guò)創(chuàng)建一個(gè)工程方法來(lái)生成ul標(biāo)簽，但是在我們這個(gè)例子中只有一次ul的創(chuàng)建，所以我們可以通過(guò)createElement來(lái)創(chuàng)建ul元素。當(dāng)然我們可以再生成一個(gè)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標(biāo)簽提供了內(nèi)置的工廠方法 React.DOM.HtmlTag。同樣我們使用內(nèi)置的工廠方法修改上面的例子

例四

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

同樣的對(duì)于li元素我們也可以使用內(nèi)置的工廠方法，代碼如下

例五

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

這樣的代碼看起來(lái)是不是更簡(jiǎn)單。

以上所有就是指定參數(shù)類型為html標(biāo)簽名字的工廠方法的使用。下面我們看使用指定參數(shù)類型為ReactClass的使用方法。

type參數(shù)為ReactClass

同樣我們通過(guò)指定參數(shù)為ReactClass對(duì)例一進(jìn)行改寫(xiě)。代碼如下

例六

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

在上面的例子中，通過(guò)使用ReactClass的方式創(chuàng)建li的工廠方法，在生成li元素的時(shí)候不能再使用下面的情況

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

因?yàn)槿绻褂眠@樣的方式，雖然可以創(chuàng)建成功li元素，但是li中的文本并沒(méi)有被生成。所以我們需要借助props來(lái)生成其文本。

同樣對(duì)于ul元素，我們也可以使用ReactClass的方式先生成工廠方法，然后再使用工廠方法創(chuàng)建ul元素。使用方法是相同的，在這里我就不再舉例子了。

讀到這里，這篇“React的createFactory怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。