React 的 Ant Design Mobile 级联菜单

2023-09-19 23:52:08

React 中使用 Ant Design Mobile 级联菜单，打造原生体验

简介

级联菜单是一种常用的 UI 组件，允许用户在分层数据结构中进行导航。在 React 中，我们可以使用 Ant Design Mobile 库提供的 Cascader 组件轻松实现这种控件。

本博客将详细介绍如何在 React 中使用 Ant Design Mobile 级联菜单，并展示如何对其进行配置和自定义以满足特定的需求。

安装和导入

首先，需要安装 Ant Design Mobile 库：

npm install antd-mobile

然后，在你的 React 组件中导入 Cascader 组件：

import { Cascader } from 'antd-mobile';

数据结构

级联菜单的数据源是一个嵌套数组，其中每个数组项代表一个选项。数组项可以包含以下属性：

value: 选项值
label: 选项标签
disabled: 选项是否禁用
children: 子选项（嵌套数组）

渲染级联菜单

使用 Cascader 组件渲染级联菜单非常简单：

<Cascader
  data={data}  // 数据源
  value={['省份 1', '城市 1']}  // 初始值
  onChange={(value) => { console.log(value); }}  // 当选择改变时触发的回调函数
/>

选项自定义

可以通过以下属性来自定义级联菜单选项：

label: 设置选项标签
value: 设置选项值
disabled: 禁用选项
children: 设置子选项
icon: 设置子选项的图标

代码示例

以下代码示例展示了如何使用 Ant Design Mobile 级联菜单在 React 中创建一个简单的省市选择器：

import { Cascader } from 'antd-mobile';

const data = [
  {
    value: 'province_1',
    label: '省份 1',
    children: [
      {
        value: 'city_1',
        label: '城市 1',
      },
      {
        value: 'city_2',
        label: '城市 2',
      },
    ],
  },
  {
    value: 'province_2',
    label: '省份 2',
    children: [
      {
        value: 'city_3',
        label: '城市 3',
      },
      {
        value: 'city_4',
        label: '城市 4',
      },
    ],
  },
];

const ProvinceCitySelector = () => {
  return (
    <Cascader
      data={data}
      value={['province_1', 'city_1']}
      onChange={(value) => { console.log(value); }}
    />
  );
};

export default ProvinceCitySelector;