react省市区三级联动如何做
实现React省市区三级联动的方法
使用antd的Cascader组件
安装antd库后，直接使用Cascader组件并配置options属性。需准备嵌套格式的数据，例如：
import { Cascader } from 'antd';
const options = [
{
value: 'zhejiang',
label: '浙江',
children: [
{
value: 'hangzhou',
label: '杭州',
children: [
{ value: 'xihu', label: '西湖区' }
]
}
]
}
];
function App() {
return <Cascader options={options} />;
}自定义组件+接口动态加载
通过API分层获取数据，初始加载省份，选择后动态加载市/区：
const [options, setOptions] = useState([]);
const loadData = async (selectedOptions) => {
const targetOption = selectedOptions[selectedOptions.length - 1];
const res = await fetch(`/api/region?parentId=${targetOption.value}`);
targetOption.children = res.data;
setOptions([...options]);
};
useEffect(() => {
fetch('/api/provinces').then(res => setOptions(res.data));
}, []);使用现成的地区数据包
安装china-division等地区数据包，直接导入结构化数据：
import provinces from 'china-division/dist/provinces.json';
import cities from 'china-division/dist/cities.json';
import areas from 'china-division/dist/areas.json';
// 数据预处理逻辑
const processedOptions = processData(provinces, cities, areas);纯前端实现注意事项
- 大数据量时考虑虚拟滚动优化性能
- 可添加搜索功能过滤选项
- 使用Memo优化组件避免重复渲染
- 清除已选项时需重置下级选项
后端API设计建议
- 提供按parent_id查询的接口
- 返回数据格式统一为{value, label}结构
- 支持缓存减少数据库查询
- 考虑添加懒加载参数控制返回层级
