jsx实现tabs功能，代替vue的slot

TabsDemo：

<template>
	<Tabs2 default-avtive-key="1" @change="onTabsChange">
		<TabPanel key="1" title="title1">
			<div>tab panel content 1</div>
		</TabPanel>
		<TabPanel key="2" title="title2">
			<div>tab panel content 2</div>
		</TabPanel>
		<TabPanel key="3" title="title3">
			<div>tab panel content 3</div>
		</TabPanel>
	</Tabs2>
</template>

	import Tabs from './Tabs.vue'
	import Tabs2 from './Tabs2.jsx'
	import TabPanel from './TabPanel.vue'
	export default{
		components:{
			Tabs,
			TabPanel,
			Tabs2
		},
		setup() {
			
		},
		methods:{
			onTabsChange(key){
				console.log(key);
			}
		}
	}

TabPanel：

<template>
	<slot></slot>
</template>

export default{
		props:['key','title'],
		setup() {
			
		}
	}

Tabs2：

import { defineComponent, ref } from "vue"

export default defineComponent({
	name:'Tabs2',
	props:['defaultAvtiveKey'],
	emits:['change'],
	setup(props, context){
		const children = context.slots.default();
		const titles = children.map(panel => {
			const { key, title } = panel.props || {}
			return {
				key,
				title
			}
		})
		
		//当前activeKey
		const actKey = ref(props.defaultAvtiveKey)
		function changeActiveKey(val){
			actKey.value = val
			context.emit('change', val)
		}
		
		//jsx
		const render = () => <>
			<div>
				{
					titles.map((val)=>{
						const {key, title} = val
						return <button
							key={key}
							style={  { color : actKey.value === key? 'blue' : '#ccc' }  }
							onClick={() => changeActiveKey(key)}
						>
							{title}
						</button>
					})
				}
			</div>
			<div>
				{children.filter((val)=>{
					const {key} = val.props || {}
					if(key === actKey.value) return true 
					return false
					
				})}
			</div>
		</>
		return render
	}
})