getelementbyid，createElement方法使用详解

老铁们，大家好，相信还有很多朋友对于getelementbyid和createElement方法使用详解的相关问题不太懂，没关系，今天就由我来为大家分享分享getelementbyid以及createElement方法使用详解的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！

1、大家看到createElement方法，自然就想到了document.createElement()了。没错，这两个方法的名字是一样的。但是，这里我们要介绍的是React.createElement()而不是document.createElement()。

2、React.createElement

3、ReactElementcreateElement(\nstring/ReactClasstype,\n[objectprops],\n[children...]\n)

React.createElement方法创建并返回一个给定类型的ReactElement元素。type参数可以是一个html标签名称字符串，也可以是一个ReactClasss。这个type参数对于createElement来说是必须的。第二个参数是该标签的属性，这个参数是可选的。第三个参数是该元素的子节点，同样也是可选的。

4、下面我们分别就第一个参数类型来做简单的介绍。

5、type参数为html标签名称

6、type参数可以是一个html标签名称，也可以是一个ReactClass。首先我们看使用html标签的例子。这个例子来自官网，接下来所有的例子都是围绕这个例子进行改写。

7、varchild1=React.createElement('li',null,'FirstTextContent');\nvarchild2=React.createElement('li',null,'SecondTextContent');\nvarchild3=React.createElement('li',null,'ThirdTextContent');\nvarroot=React.createElement('ul',{className:'my-list'},child1,child2,child3);\nReactDOM.render(\nroot,\ndocument.getElementById('content')\n);

这个例子很简单，第一个参数是html标签的名称ul和li。我们看前三个createElement的第二个参数和第三个参数，因为上面不需要第二个参数，但是需要有第三个参数作为li的文本内容，也就是li的子内容，所以第二个参数赋值为null。

8、但是对于创建ul元素的createElement方法来说，同样第一个参数是html标签名称ul，第二个参数是一个props对象{className:'my-list'}。当然这里我们也可以添加其他的属性例如{className:'my-list',name:’ulname’}。这些属性可以通过this.props.name来调用。但是奇怪的是第二个参数以后有多个参数，这怎么解释。是不是createElement不止三个参数，从第二个参数往后，该节点有多少个子节点那就有多少个参数。可以这么认为，但是我们对上面的例子稍加改造就可以看出其实说createElement有三个参数也没有问题。

9、varchild1=React.createElement('li',null,'FirstTextContent');\nvarchild2=React.createElement('li',null,'SecondTextContent');\nvarchild3=React.createElement('li',null,'ThirdTextContent');\nvarroot=React.createElement('ul',{className:'my-list'},[child1,child2,child3]);\nReactDOM.render(\nroot,\ndocument.getElementById('content')\n);

我们将第二个参数以后的参数都放在数组里，这样就可以认为第三个参数是一个数组，数组中的元素就是该节点的所有子节点。

10、从这我们可以看出其实React的使用非常的灵活。

11、type参数为ReactClass

12、我们看上面的例子，type参数为html标签名称。使用方法其实挺简单的，需要注意的是第二个参数和第三个参数。下面我们来看一下type类型为ReactClass的使用方法。

13、varcli=React.createClass({\nrender:function(){\nreturn(\n<li>\n{this.props.text}\n</li>\n)\n}\n})\nvarchild1=React.createElement(cli,{key:'F',text:'FirstTextContent'});\nvarchild2=React.createElement(cli,{key:'S',text:'SecondTextContent'});\nvarchild3=React.createElement(cli,{key:'T',text:'ThirdTextContent'});\nvarroot=React.createElement('ul',{className:'my-list'},[child1,child2,child3]);\nReactDOM.render(\nroot,\ndocument.getElementById('content')\n);

在这里我们看第一个参数cli就是createClass的返回值。需要注意的是，对于前三个li的createElement第二个参数要加上key:’value’这里的value彼此都不相同，如果不指定此属性——虽然也能按照逻辑正常显示——会报如下的警告

14、Warning:Eachchildinanarrayoriteratorshouldhaveaunique"key"prop.Checkthetop-levelrendercallusing<ul>.Seehttps://fb.me/react-warning-keysformoreinformation.

15、当然如果上述例子中我们只创建了一个li元素，没有child2和child3，只有child1，那第二个参数的key属性也得指定，否则同样也是会报如上的警告。

16、对于例三我们也可以进行如下的改写

17、varcli=React.createClass({\nrender:function(){\nreturn(\n<li>\n{this.props.children}\n</li>\n)\n}\n})\nvarchild1=React.createElement(cli,{key:'F'},'FirstTextContent');\nvarchild2=React.createElement(cli,{key:'S'},'SecondTextContent');\nvarchild3=React.createElement(cli,{key:'T'},'ThirdTextContent');\nvarroot=React.createElement('ul',{className:'my-list'},[child1,child2,child3]);\nReactDOM.render(\nroot,\ndocument.getElementById('content')\n);

同样在createElement中指定第三个参数，在createClass中使用this.props.children进行引用。

18、上面就是React.createElement的使用方法，可以看出其使用方式非常灵活，在实际生产中我们应该选择适合于自己的方式方便快捷的进行开发。

文章到此结束，如果本次分享的getelementbyid和createElement方法使用详解的问题解决了您的问题，那么我们由衷的感到高兴！