React.createElement使用

来源:互联网 发布:韩国古代历史 知乎 编辑:程序博客网 时间:2024/05/30 12:30

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









0 0
原创粉丝点击