vue使用jsx写法如何实现动态组件功能？

什么是动态组件？
已知在template写法中，动态组件是这么写的

<component :is="currentTabComponent"  />

如果换成jsx想当然的会写成这样

<component is={this.currentTabComponent} />

这样会直接报错
Unknown custom element: <component> - did you register the component correctly……

所以这里换一种方式
方案1：用switch case方式

currentTabComponent='a'
handleChange(name){
	this.currentTabComponent=name;
}
dynaComponent(){
	switch(this.currentTabComponent){
		case 'a':
			return <a/>
		case 'b':
		default:
			return <b/>
	}
}
render(){
	return (
		<div>
			<button onclick={()=>{this.handleChange('a')}}>a</button>
			<button onclick={()=>{this.handleChange('b')}}>b</button>
			{this.dynaComponent()}
		</div>
	);
}

此写法也可以嵌套在keep-alive中
例如

<keep-alive>
     {this.dynaComponent()}
</keep-alive>

方案2：使用createElement函数
在jsx中，render()带一个可选参数，这个参数就是createElement函数
关于createElement函数
示例:

currentTabComponent='a'
handleChange(name){
	this.currentTabComponent=name;
}
render(h){
	return (
		<div>
			<button onclick={()=>{this.handleChange('a')}}>a</button>
			<button onclick={()=>{this.handleChange('b')}}>b</button>
			{h(this.currentTabComponent)}
		</div>
	);
}

以上。