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怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。