hm-react-cli/template/app/src/components/Cascader.js

Create a Huimei React project by module

import { Cascader } from 'antd';
import { connect } from 'react-redux';

const mapState = (state) => ({
    count: state.count
});

const mapDispatch = ({ count: { increment, incrementAsync } }) => ({
    increment: () => increment(1),
    incrementAsync: () => incrementAsync(1)
});

const options = [
    {
        value: 'zhejiang',
        label: '浙江',
        children: [
            {
                value: 'hangzhou',
                label: '杭州',
                children: [
                    {
                        value: 'xihu',
                        label: '西湖'
                    }
                ]
            }
        ]
    },
    {
        value: 'jiangsu',
        label: '江苏',
        children: [
            {
                value: 'nanjing',
                label: '南京',
                children: [
                    {
                        value: 'zhonghuamen',
                        label: '中华门'
                    }
                ]
            }
        ]
    }
];

function onChange(value) {
    console.log(value);
}

function CascaderDemo(props) {
    return (
        <div>
            {props.count}
            <Cascader options={options} onChange={onChange} placeholder="请选择地区" />
        </div>
    );
}

export default connect(mapState, mapDispatch)(CascaderDemo);