当前位置：首页 > React

级联组件react实现

2026-01-27 11:23:28React

级联组件 React 实现

基本概念

级联组件（Cascader）通常用于多层级数据的选择，例如省市区选择、分类选择等场景。React 中可以通过状态管理和组件组合实现级联效果。

数据结构设计

级联组件的数据通常为树形结构，例如：

const data = [
  {
    label: '省份',
    value: 'province',
    children: [
      { label: '北京', value: 'beijing' },
      { label: '上海', value: 'shanghai' }
    ]
  }
];

状态管理

使用 React 的 useState 钩子管理当前选择的层级和值：

const [selectedValues, setSelectedValues] = useState([]);
const [options, setOptions] = useState(data);

渲染级联选择器

通过递归或循环渲染每一级的选择器：

<div>
  {selectedValues.map((value, index) => (
    <select
      key={index}
      value={value}
      onChange={(e) => handleChange(index, e.target.value)}
    >
      {options[index].map((item) => (
        <option key={item.value} value={item.value}>
          {item.label}
        </option>
      ))}
    </select>
  ))}
</div>

处理选择变化

当某一级的选择发生变化时，更新后续层级的数据：

const handleChange = (level, value) => {
  const newSelectedValues = [...selectedValues.slice(0, level), value];
  const newOptions = [...options.slice(0, level + 1)];

  // 获取下一级的数据
  const currentOption = newOptions[level].find(item => item.value === value);
  if (currentOption.children) {
    newOptions.push(currentOption.children);
  }

  setSelectedValues(newSelectedValues);
  setOptions(newOptions);
};

完整组件示例

import React, { useState } from 'react';

const Cascader = ({ data }) => {
  const [selectedValues, setSelectedValues] = useState([]);
  const [options, setOptions] = useState([data]);

  const handleChange = (level, value) => {
    const newSelectedValues = [...selectedValues.slice(0, level), value];
    const newOptions = [...options.slice(0, level + 1)];

    const currentOption = newOptions[level].find(item => item.value === value);
    if (currentOption.children) {
      newOptions.push(currentOption.children);
    }

    setSelectedValues(newSelectedValues);
    setOptions(newOptions);
  };

  return (
    <div>
      {options.map((levelOptions, index) => (
        <select
          key={index}
          value={selectedValues[index] || ''}
          onChange={(e) => handleChange(index, e.target.value)}
        >
          <option value="">请选择</option>
          {levelOptions.map((item) => (
            <option key={item.value} value={item.value}>
              {item.label}
            </option>
          ))}
        </select>
      ))}
    </div>
  );
};

export default Cascader;