在vue中使用jsx

如何用jsx写vue组件

下面是一个例子

父组件 app.vue

// 关键代码
<Demo number="1">第一个</Demo>
<Demo number="2">第二个</Demo>
<Demo number="3">第三个</Demo>

demo.jsx文件

export default {
	props: ['number'],
	render(createElement){
		let tagName = `h${this.number}`
		return (
			<tagName>{this.$slot.default}</tagName>
			)
	}
}

或者通过render函数中的参数createElement这个函数

export default {
	props: ['number'],
	render(createElement){
		let tagName = `h${this.number}`
		return (
			createElement(
			`h${tagName}`, // 标签名称
			this.$slot.default // 子元素数组
			)
			)
	}
}