React.createElement方法怎么使用

這篇文章主要介紹“React.createElement方法怎么使用”，在日常操作中，相信很多人在React.createElement方法怎么使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”React.createElement方法怎么使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

React.createElement

首先我們看官方給出的解釋

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

React.createElement方法創(chuàng)建并返回一個(gè)給定類型的ReactElement元素。type參數(shù)可以是一個(gè)html標(biāo)簽名稱字符串，也可以是一個(gè)ReactClasss。這個(gè)type參數(shù)對(duì)于createElement來(lái)說(shuō)是必須的。第二個(gè)參數(shù)是該標(biāo)簽的屬性，這個(gè)參數(shù)是可選的。第三個(gè)參數(shù)是該元素的子節(jié)點(diǎn)，同樣也是可選的。

下面我們分別就第一個(gè)參數(shù)類型來(lái)做簡(jiǎn)單的介紹。

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

type參數(shù)可以是一個(gè)html標(biāo)簽名稱，也可以是一個(gè)ReactClass。首先我們看使用html標(biāo)簽的例子。這個(gè)例子來(lái)自官網(wǎng)，接下來(lái)所有的例子都是圍繞這個(gè)例子進(jìn)行改寫。

例一

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

這個(gè)例子很簡(jiǎn)單，第一個(gè)參數(shù)是html標(biāo)簽的名稱ul和li。我們看前三個(gè)createElement的第二個(gè)參數(shù)和第三個(gè)參數(shù)，因?yàn)樯厦娌恍枰诙€(gè)參數(shù)，但是需要有第三個(gè)參數(shù)作為li的文本內(nèi)容，也就是li的子內(nèi)容，所以第二個(gè)參數(shù)賦值為null。

但是對(duì)于創(chuàng)建ul元素的createElement方法來(lái)說(shuō)，同樣第一個(gè)參數(shù)是html標(biāo)簽名稱ul，第二個(gè)參數(shù)是一個(gè)props對(duì)象{ className: 'my-list'}。當(dāng)然這里我們也可以添加其他的屬性例如{ className: 'my-list', name:’ulname’}。這些屬性可以通過(guò)this.props.name來(lái)調(diào)用。但是奇怪的是第二個(gè)參數(shù)以后有多個(gè)參數(shù)，這怎么解釋。是不是createElement不止三個(gè)參數(shù)，從第二個(gè)參數(shù)往后，該節(jié)點(diǎn)有多少個(gè)子節(jié)點(diǎn)那就有多少個(gè)參數(shù)?？梢赃@么認(rèn)為，但是我們對(duì)上面的例子稍加改造就可以看出其實(shí)說(shuō)createElement有三個(gè)參數(shù)也沒(méi)有問(wèn)題。

例二

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

我們將第二個(gè)參數(shù)以后的參數(shù)都放在數(shù)組里，這樣就可以認(rèn)為第三個(gè)參數(shù)是一個(gè)數(shù)組，數(shù)組中的元素就是該節(jié)點(diǎn)的所有子節(jié)點(diǎn)。

從這我們可以看出其實(shí)React的使用非常的靈活。

type參數(shù) 為ReactClass

我們看上面的例子，type參數(shù)為html標(biāo)簽名稱。使用方法其實(shí)挺簡(jiǎn)單的，需要注意的是第二個(gè)參數(shù)和第三個(gè)參數(shù)。下面我們來(lái)看一下type類型為ReactClass的使用方法。

例三

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

在這里我們看第一個(gè)參數(shù)cli就是createClass的返回值。需要注意的是，對(duì)于前三個(gè)li的createElement第二個(gè)參數(shù)要加上key:&rsquo;value&rsquo; 這里的value彼此都不相同，如果不指定此屬性&mdash;&mdash;雖然也能按照邏輯正常顯示&mdash;&mdash;會(huì)報(bào)如下的警告

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

當(dāng)然如果上述例子中我們只創(chuàng)建了一個(gè)li元素，沒(méi)有child2和child3，只有child1，那第二個(gè)參數(shù)的key屬性也得指定，否則同樣也是會(huì)報(bào)如上的警告。

對(duì)于例三我們也可以進(jìn)行如下的改寫

例四

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

同樣在createElement中指定第三個(gè)參數(shù)，在createClass中使用this.props.children進(jìn)行引用。

上面就是React.createElement的使用方法，可以看出其使用方式非常靈活，在實(shí)際生產(chǎn)中我們應(yīng)該選擇適合于自己的方式方便快捷的進(jìn)行開(kāi)發(fā)。

到此，關(guān)于“React.createElement方法怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！