浅谈React.createElement()方法-蒲公英云

浅谈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

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