React.createElement分析

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

FROM
https://www.cnblogs.com/sunxiaopei/p/12205447.html

上一篇:Json字符串的高亮显示 react-jsx


下一篇:【Java SE 9】包机制