vue3 + jsx 插槽带参数的使用以及参数中带有render函数的使用

// 子组件
import {defineComponent, onBeforeMount, reactive, ref, renderSlot} from "vue";
import type { SetupContext } from "vue";

export const list = defineComponent({
    props: {
        list: { type: Array, default: () => [] },
    },
    setup(props,  { slots }: SetupContext) {
        return (h) => (
            <div>
                {props.list.map((item: any, index) => {
                    return (
                        <div>
                            {/* render的使用 */}
                            <div>
                                {item.render(h, item)}
                            </div>
                            {/* 插槽的使用 */}
                            <div>
                                {renderSlot(slots, "A", {'item': item, 'index': index})}
                            </div>
                        </div>
                    )
                })}
            </div>
        )
    }
})

// 父组件
<template>
    <div>
        <list :list="list">
            // 插槽的使用
            <template #A="scope">
                <div @click="look(scope)">查看参数</div>
            </template>
        </div>
    </div>
</template>

const list = [
    {
        id: 1,
        name: '名字',
        render(h, row) {
            // h('div', {}, row.type == "1" ? '正常' : '禁用')
            return row.type == "1" ? '正常' : '禁用'
        }
    }
]

function look(scope) {
    console.log(scope.item)
    // 输出 {id: 1,name ....}
    console.log(scope.index)
    // 输出 下标 0
}