react实现级联导航
实现级联导航的基本思路
级联导航通常指多级联动的菜单或选择器，例如地区选择（省-市-区）或分类选择。React中可通过状态管理和组件嵌套实现。
数据结构设计
采用树形结构存储导航数据，例如：
const data = [
{
id: 1,
name: "一级菜单A",
children: [
{ id: 11, name: "二级菜单A1" },
{ id: 12, name: "二级菜单A2" }
]
},
{
id: 2,
name: "一级菜单B",
children: [
{ id: 21, name: "二级菜单B1" }
]
}
]状态管理方案
使用React的useState或状态管理库（如Redux）存储当前选择路径：
const [selectedPath, setSelectedPath] = useState([]);组件递归渲染
创建可递归渲染的子组件：
const Cascader = ({ data, level = 0, selectedPath, onSelect }) => {
const currentItems = level === 0
? data
: data.find(item => item.id === selectedPath[0])?.children || [];
return (
<div>
{currentItems.map(item => (
<div key={item.id} onClick={() => onSelect(item, level)}>
{item.name}
</div>
))}
{selectedPath[level] && (
<Cascader
data={data}
level={level + 1}
selectedPath={selectedPath}
onSelect={onSelect}
/>
)}
</div>
);
}选择事件处理
实现选择回调函数更新路径状态：
const handleSelect = (item, level) => {
const newPath = [...selectedPath.slice(0, level), item.id];
setSelectedPath(newPath);
}完整组件示例
组合以上逻辑的完整组件：
function CascaderMenu({ data }) {
const [selectedPath, setSelectedPath] = useState([]);
const handleSelect = (item, level) => {
const newPath = [...selectedPath.slice(0, level), item.id];
setSelectedPath(newPath);
};
return (
<div style={{ display: 'flex' }}>
<Cascader
data={data}
selectedPath={selectedPath}
onSelect={handleSelect}
/>
</div>
);
}样式优化建议
添加CSS实现横向或纵向布局：
.cascader-level {
margin-right: 20px;
}
.cascader-item {
padding: 8px 12px;
cursor: pointer;
}
.cascader-item:hover {
background: #f0f0f0;
}性能优化方向
对于大数据量场景：
- 使用虚拟滚动（react-window库）
- 添加防抖处理搜索过滤
- 使用React.memo避免不必要的渲染
第三方库方案
推荐使用现有解决方案：
- ant-design的Cascader组件
- rc-cascader基础组件
- react-cascader-dropdown
这些库已处理边缘情况如异步加载、搜索过滤等功能。
