React.createElement()

JSX 语法就是用React.createElement()来构建 React 元素的。它接受三个参数：
1)第一个参数可以是一个标签名。如div、span，或者 React 组件。
2)第二个参数为传入的属性。
3)第三个以及之后的参数，皆作为组件的子组件。
其基本结构如下

1
2
3
4
5
React.createElement(
    type,
    [props],
    [...children]
)

让我们看一下它实际的两种写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
写法一：

var child1 = React.createElement('li', null, 'one');
var child2 = React.createElement('li', null, 'two');
var content = React.createElement('ul', { className: 'teststyle' }, child1, child2); // 第三个参数可以分开也可以写成一个数组
ReactDOM.render(
    content,
    document.getElementById('example')
);

写法二：

var child1 = React.createElement('li', null, 'one');
var child2 = React.createElement('li', null, 'two');
var content = React.createElement('ul', { className: 'teststyle' }, [child1, child2]);
ReactDOM.render(
    content,
    document.getElementById('example')
);

在我们应用JSX进行开发的时候，其实它最终会转化成React.createElement…去创建元素。

1
2
3
4
5
6
7
8
9
10
11
12
//JSX写法：

class Hello extends React.Component {
    render() {
        return <div>Hello, { this.props.toWhat }</div>
    }
}

ReactDOM.render(
    <Hello toWhat=‘world’>,
    document.getElementById(‘root’)
)

1
2
3
4
5
6
7
8
9
10
11
12
// 转化为原生JS后的写法

class Hello extends React.Component {
    render(){
        return React.createElement(‘div’,null, `Hello,${this.props.toWhat}`)
    }
}

ReactDOM.render(
    React.createElement(Hello, { toWhat: ‘world’ }, null),
    document.getElementById(‘root’)
)

React.cloneElement()

React.cloneElement()与React.createElement()相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。
其基本结构如下

1
2
3
4
5
React.cloneElement(
  element,
  [props],
  [...children]
)

(重点记住定义)克隆并返回一个新的 ReactElement （内部子元素也会跟着克隆），新返回的元素会保留有旧元素的 props、ref、key，也会集成新的 props（只要在第二个参数中有定义）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var Li = React.createClass({
    render: function() {
        return <li>{this.props.i}</li>
    }
});
var Ul = React.createClass({
    deal : function(child, index){
        //注意下面这行换成 createElement 会报错！因为child是ReactElement而不是ReactClass或字符串
        return React.cloneElement(child, {i:index});
    },
    render: function() {
        return <ul>{this.props.children.map(this.deal)}</ul>;
    }
});
React.render((
    <Ul>
        <Li i="9" />
        <Li i="8" />
        <Li i="7" />
    </Ul>
), document.body);

参考资料：
React.createElement的理解使用
React 克隆组件 —– React.cloneElement