浅谈React.createElement()方法

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来调用：

var Li = React.createClass({
	render:function(){
    	return (
  			<li>{this.props.text}</li>
  		);
	}
})
var li1 = React.createElement(Li, {key:'1',text:'First'});
var li2 = React.createElement(Li, {key:'2',text:'Second'});
var li3 = React.createElement(Li, {key:'3',text:'Third'});
var ul = React.createElement('ul', {className: 'list'}, [li1, li2, li3]);
ReactDOM.render(
    ul,
    document.getElementById('content')
);

注意：即使只创建一个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来调用：

var Li = React.createClass({
	render:function(){
    	return (
  			<li>{this.props.children}</li>
  		);
	}
});
var li1 = React.createElement(Li, {key:'1'}, 'First');
var li2 = React.createElement(Li, {key:'2'}, 'Second');
var li3 = React.createElement(Li, {key:'3'}, 'Third');
var ul = React.createElement('ul', {className: 'list'}, [li1, li2, li3]);
ReactDOM.render(
    ul,
    document.getElementById('content')
);