浅谈React.createElement()方法

最新推荐文章于 2026-06-02 11:14:26 发布

原创最新推荐文章于 2026-06-02 11:14:26 发布 · 8.4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

React

本文介绍了React中的createElement方法，包括其参数、返回值及使用示例。示例展示了如何使用该方法创建HTML标签和React组件，并强调了为每个子元素设置唯一key的重要性。

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

标签

#React #createElement