浅谈React.createElement()方法

超、凢脫俗 2022-06-17 09:42 787阅读 0赞

document有createElement()方法，React也有createElement()方法，下面就来介绍React的createElement()方法。

var reactElement = ReactElement.createElement(
      	... // 标签名称字符串/ReactClass,
      	... // [元素的属性值对对象],
      	... // [元素的子节点]
    )

1、参数：

1）第一个参数：可以是一个html标签名称字符串，也可以是一个ReactClass（必须）；

2）第二个参数：元素的属性值对对象（可选），这些属性可以通过this.props.\*来调用；

3）第三个参数开始：元素的子节点（可选）。

2、返回值：

一个给定类型的ReactElement元素

eg1：第一个参数为一个html标签名称字符串

var li1 = React.createElement('li', null, 'First');
    var li2 = React.createElement('li', null, 'Second');
    var li3 = React.createElement('li', null, 'Third');
    var ul = React.createElement('ul', {className: 'list'}, li1, li2, li3);
    ReactDOM.render(
    	ul,
        document.getElementById('content')
    );

eg2：第一个参数为一个ReactClass

属性值通过this.props.text来调用：

注意：即使只创建一个li元素，createElement第二个参数也要加上key:’value’，value值彼此不相同，如果不指定此属性，虽然也能按照逻辑正常显示，但会报如下的警告：

Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <ul>.

eg3：第一个参数为一个ReactClass

属性值通过this.props.children来调用：