React.createElement分析

最新推荐文章于 2023-11-24 08:45:23 发布

江湖yi山人

最新推荐文章于 2023-11-24 08:45:23 发布

阅读量518

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_30997503/article/details/118582916

本文详细介绍了如何在React中使用createElement方法创建HTML标签、自定义组件以及Fragment组件，并展示了实际代码示例。通过实例演示，帮助理解jsx语法转换和组件构建的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React.createElement(标签，props对象，子节点1，子节点2，…)：创建一个React元素，包含三个参数，
第一个参数必填，表示传入的HTML最外层标签；
第二个参数选填，表示属性，如className;
第三个参数选填，表示子节点或文本内容。

React.createElement(
  type,
  [props],
  [...children]
)

具体使用：
jsx语法通过babel转化为js语法时，内部调用了React.createElement()方法

1、HTML标签

<ui className='tab-parentt' title='title-name'>
	<li className='tab-child'>1</li>
	<li>2</li>
</div>

React.createElement('ui', {
	className: 'tab-parent',
	title: 'title-name'
}, React.createElement('li', {
	className: 'tab-child'
}, '1'), React.createElement('li', null, '2'))

2、自定义组件

function Comp() {
	return <a>text</a>
}
<Comp key='1'>
	<div className='hah'>2</div>
</Comp>

function Comp() {
	return React.createElement('a', null, 'text')
}

React.createElement(Copm, {
	key='1'
}, React.createElement('div', {
	className: 'hah'
}, '2'))

3、React.Fragment组件

<>
	<div className='tab-parent' title='title-name'>
		<div className='tab-child'></div>
		<div>2</div>
	</div>
<>

React.createElement(React.Fragment, null,
React.createElement('div', {
	className: 'tab-parent',
	title: 'title-name'
}, React.createElement('div', {
	className: 'tab-child'
}, '1'), React.createElement('div', null, '2')))