问题描述

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这个元素上添加一个伪类的样式，但是没有效果
                },
                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: () => {
                    }
                }
            })
        ]);
    }
}

问题出现的环境背景及自己尝试过哪些方法

尝试为div元素添加class,但是作为函数式组件，这个是js文件，style该写在哪里？

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？