【react+taro做一个商品分类的组件】版本1（我愿称之为最简版本）

UI设计图：

 

 组件代码：

import Taro from '@tarojs/taro';
import { View, Button } from '@tarojs/components';
import classNames from 'classnames';
import IconFont from "@/components/iconfont";
import './index.scss';

class TreeSelect extends Taro.PureComponent {
    constructor(props) {
        super(props);
        this.onDialogConfirm = this.onDialogConfirm.bind(this);
    }
    state = {
        isActive: 0,
        rightList: [],
        selectedList: []
    }
    static defaultProps = {
        list: [],
        confirmText: '保存',
        showConfirm: true, // 是否显示确定按钮
    }

    componentDidMount() {
        const { list } = this.props;
        this.setState({
            rightList: list[0].children
        });
    }
    // 确认事件
    onDialogConfirm() {
        const { onConfirm } = this.props;
        const { selectedList } = this.state;
        if (typeof onConfirm === 'function') {
            onConfirm(selectedList);
        }
    }
    selectLeft(index) { 
        const { list } = this.props;
        this.setState({
            rightList: list[index].children,
            isActive: index
        });
    }
    addSelected(id) {
        const { selectedList } = this.state;
        const newList = Array.from(new Set([...selectedList, id]));
        this.setState({
            selectedList: newList
        });
    }
    render() {
        const {
            list,
            confirmText,
            showConfirm,
            styles
        } = this.props;
        const {
             isActive,
             rightList,
             selectedList
        } = this.state;
        return (
            <View style={{...styles}}> 
                <View className='treeSelect'>   
                    {/* left-father */}
                    <View className='treeSelect-left'> 
                        {list && list.map((item, index) =>
                            (
                                <View
                                  key={item.id}
                                  className={classNames('leftBtn',
                                        { active: isActive === index },
                                        { activeA: isActive === (index + 1) },
                                        { activeB: isActive === (index - 1) })
                                    }
                                  onClick={() => { this.selectLeft(index); }}
                                >
                                    {item.title}
                                </View>
                            )
                        )}
                    </View>
                    {/* right-children */}
                    <View className='treeSelect-right'>
                        {rightList && rightList.map((item) =>
                            (
                                <View
                                  key={item.id}
                                  className={classNames('rightBtn', { active: selectedList.includes(item.id) })}
                                  onClick={() => {this.addSelected(item.id);}}
                                >
                                    <View>{item.title}</View>
                                    <View style={{ display: selectedList.includes(item.id) ? 'flex' : 'none' }} className='checkIcon'>
                                        <IconFont name='common_icon_dagou' size={32} color='rgb(58,110,244)' />
                                    </View>
                                </View>
                            )
                        )}
                    </View>
                </View>
                {showConfirm && <View className='btns'>
                    <Button
                      FormType='submit'
                      className={classNames('btn', { active: selectedList.length })}
                      onClick={this.onDialogConfirm}
                    >{confirmText}</Button>
                </View>}
            </View>
        );
    }
}

export default TreeSelect;

　　组件样式表：

.treeSelect {
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: flex-start;
    &-left {
        width: 40%;
        .leftBtn {
            position: relative;
            width: 100%;
            height: 88px;
            line-height: 88px;
            padding-left: 80px;
            color: #171717;
            box-sizing: border-box;
            background-color: #F7F7F9;
            &.active {
                color: #3A6EF4;
                background-color: #fff;
            }
            &.activeA{
                border-bottom-right-radius: 20px;
            }
            
            &.activeB{
                border-top-right-radius: 20px;
            }
        }
    }
    &-right {
        width: 60%;
        .rightBtn{
            height: 88px;
            line-height: 88px;
            padding-left: 120px;
            color: #171717;
            box-sizing: border-box;
            &.active {
                color: #3A6EF4;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .checkIcon{
                    margin-right: 50px;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
}

.btns {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    text-align: center;
    padding: 0 24px;
    box-sizing: border-box;
    .btn {
        width: 100%;
        height: 80px;
        padding: 0;
        color: #fff;
        background-color: #A5A8AF;
        box-shadow: 0px 4px 12px #B9BCC5;
        font-weight: bold;
        border: none;
        border-radius: 12px;
        &.active {
            background-color: #3A6EF4;
            box-shadow: 0px 4px 12px #3A6EF4;
        }
    }
}

　　调用组件：

import TreeSelect from '@/components/TreeSelect';

。。。
        const myList = [
            {
                id: '1212121',
                title: '日用品',
                children: [
                    {
                        id: '32232312',
                        title: '洗发水'
                    },
                    {
                        id: '3234232',
                        title: '洗发水1'
                    },
                    {
                        id: '32243132',
                        title: '洗发水2'
                    },
                    {
                        id: '2131212312',
                        title: '洗发水3'
                    },
                ]
            },
            {
                id: '121212w2221',
                title: '服务',
                children: [
                    {
                        id: '3223222222312',
                        title: '洗发水222'
                    },
                    {
                        id: '3234232342432',
                        title: '洗发水3331'
                    },
                    {
                        id: '32243342132',
                        title: '洗发水4442'
                    },
                    {
                        id: '123232113324524',
                        title: '洗发水3555'
                    },
                ]
            },
            {
                id: '121212w2221',
                title: '服务333',
                children: [
                    {
                        id: '322322222231332',
                        title: '洗发水233322'
                    },
                    {
                        id: '323423234243222',
                        title: '洗发水3333331'
                    },
                    {
                        id: '322433421322',
                        title: '洗发水3334442'
                    },
                    {
                        id: '1232321133224524',
                        title: '洗发水3533355'
                    },
                ]
            }
        ];




<TreeSelect list={myList} />

　　微信小程序预览效果：

 

 

 

 

 

TBC.