实现一个不定项级联选择器

[MrTreasure]

要求

1. 实现 hover、selected 状态
2. 实现受控组件(双向绑定)
3. 接收指定参数
4. Vue React 均可

考察点

1. 树的遍历
2. 基本组件实现的细节

interface CascaderItem {
    label: string
    value: string | number
    children?: CascaderItem[]
}

interface CascaderProp {
    datasource: CascaderItem[]
    placeholder?: string
    styles: React.styles
    disabled?: boolean
    value: string[] | number[]
    onChange?: (values: string[] | number[]) => void
}

const datasource = {
    {
        label: '北京',
        value: 1
    },
    {
        label: '上海',
        value: 2
    },
    {
        label: '四川',
        value: 3,
        children: [
            {
                label: '成都',
                value: 31,
                children: [
                    {
                        label: '高新区',
                        value: 311
                    },
                    {
                        label: '天府新区',
                        value: 312
                    },
                    {
                        label: '武侯区',
                        value: 313
                    }
                ]
            },
            {
                label: '攀枝花',
                value: 32
            }
        ]
    },
    {
        label: '江西',
        value: 4,
        children: [
            {
                label: '南昌',
                value: 41
            },
            {
                label: '九江',
                value: 42
            },
            {
                label: '上饶',
                value: 43
            }
        ]
    },
    {
        label: '湖南'，
        value: 5
    }
}

[hstarorg]

这种场景，用 className 替代 styles 也是不错的。value onChange 多用于 react，vue的话，可以直接用 value.sync 或者 v-model 替代。另外，angular 选手也可以尝试实现。

[MrTreasure]

React.styles 表示可以给组件样式值 组件会 <Com style={this.props.styles} /> 这样的方式传递。并不影响 className 的使用。为了简单写所以写成了 react 的接口，onChange 本质就是 value.sync。

[hstarorg]

哈哈，我是指回答者，可以按照我那个去思考。因为级联组件内部有多个元素，所以直接styles，很难控制到内部的元素，没有 className 来得直接。

[MrTreasure]

其实我想表达的是抽象组件设计和一般业务中实现的组件思路可能有些不同，考虑的更多的是兼容性，易用性。写组件的时候要意识到，这个组件的使用者不是开发者本身，而是别的用户，所以尽量要让这个组件保持和其他组件一致的习惯

[hstarorg]

这种抽象思路非常棒。

1. 一定要符合直觉的去设计API，包括参数名字等
2. 把自己当成用户，来使用组件，且不容易勿用

这也能引申出另外一个问题，组件的分层（不同层次的组件有不同的特点）。