React.createElement使用

最新推荐文章于 2024-08-05 11:53:50 发布

zl-zero

最新推荐文章于 2024-08-05 11:53:50 发布

阅读量1.2w

点赞数 8

分类专栏： react

本文链接：https://blog.csdn.net/skyjohson/article/details/52779077

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

React.createElement一看这个就能和document.createElement方法类似，创建元素

document.createElement是创建一个指定的元素节点，其参数只有一个nodeName：document.createElement(nodeName)

React.createElement是创建指定类型的React元素节点，其参数有三个：React.createElement(type,props,children)

官方解释：

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

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

第一个参数：必填，元素类型

第二个参数：可填，元素属性

第三个参数：可填，元素子节点

疑问：不是三个参数吗？

我们可以写成这样：

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这种方式的写法很灵活，大家可以试试，看看效果！