React.createElement方法怎么使用

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

React.createElement

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

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

React.createElement方法創建并返回一個給定類型的ReactElement元素。type參數可以是一個html標簽名稱字符串，也可以是一個ReactClasss。這個type參數對于createElement來說是必須的。第二個參數是該標簽的屬性，這個參數是可選的。第三個參數是該元素的子節點，同樣也是可選的。

下面我們分別就第一個參數類型來做簡單的介紹。

type參數 為html標簽名稱

type參數可以是一個html標簽名稱，也可以是一個ReactClass。首先我們看使用html標簽的例子。這個例子來自官網，接下來所有的例子都是圍繞這個例子進行改寫。

例一

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

這個例子很簡單，第一個參數是html標簽的名稱ul和li。我們看前三個createElement的第二個參數和第三個參數，因為上面不需要第二個參數，但是需要有第三個參數作為li的文本內容，也就是li的子內容，所以第二個參數賦值為null。

但是對于創建ul元素的createElement方法來說，同樣第一個參數是html標簽名稱ul，第二個參數是一個props對象{ className: 'my-list'}。當然這里我們也可以添加其他的屬性例如{ className: 'my-list', name:’ulname’}。這些屬性可以通過this.props.name來調用。但是奇怪的是第二個參數以后有多個參數，這怎么解釋。是不是createElement不止三個參數，從第二個參數往后，該節點有多少個子節點那就有多少個參數。可以這么認為，但是我們對上面的例子稍加改造就可以看出其實說createElement有三個參數也沒有問題。

例二

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

我們將第二個參數以后的參數都放在數組里，這樣就可以認為第三個參數是一個數組，數組中的元素就是該節點的所有子節點。

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

type參數 為ReactClass

我們看上面的例子，type參數為html標簽名稱。使用方法其實挺簡單的，需要注意的是第二個參數和第三個參數。下面我們來看一下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')
);

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

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.

當然如果上述例子中我們只創建了一個li元素，沒有child2和child3，只有child1，那第二個參數的key屬性也得指定，否則同樣也是會報如上的警告。

對于例三我們也可以進行如下的改寫

例四

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中指定第三個參數，在createClass中使用this.props.children進行引用。

上面就是React.createElement的使用方法，可以看出其使用方式非常靈活，在實際生產中我們應該選擇適合于自己的方式方便快捷的進行開發。

到此，關于“React.createElement方法怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！