vue函數(shù)式組件中的render函數(shù)如何添加偽類樣式

問題描述

export default {
    functional: true,
    props: {
        data: {
            type: String,
            default() {
                return '';
            }
        },
        depth: {
            type: Number
        }
    },
    render: (h, ctx) => {
        return h('div', {
            class: ['treeitem'],
            style: {
                ':hover': {
                    background: 'yellow'  // 希望在div這個(gè)元素上添加一個(gè)偽類的樣式，但是沒有效果
                },
                height: '40px',
                lineHeight: '40px',
                border: '1px solid #f0f0f0',
                'marginLeft': ctx.props.depth*20 + 'px'
            },
            on: {
                click: () => {
                },
                mouseover: () => {
                }
            }
        }, [
            h('Icon', {
                props: {
                    type: 'arrow-right-b',
                },
                style: {
                    marginLeft: '20px',
                    display: 'inline-block',
                    width: '40px',
                    hight: '40px'
                }
            }),
            h('span',{
                style: {
                }
            }, ctx.props.data),
            h('Button', {
                props: {
                    icon: 'ios-gear-outline'
                },
                style: {
                    float: 'right' 
                },
                on: {
                    click: () => {
                    }
                }
            })
        ]);
    }
}

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

嘗試為div元素添加class,但是作為函數(shù)式組件，這個(gè)是js文件，style該寫在哪里？

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？