用ts 定义级联数组的数据类型

在 TypeScript 中，你可以定义一个类型来描述级联数组的数据结构。假设每个级联项都有一个标签 (label)、一个值 (value)，以及一个可选的子级数组 (children)，你可以定义一个递归的类型来表示这种结构。

以下是一个示例，定义了适用于级联选择器的数据类型：

type CascaderOption = {
  label: string;
  value: string;
  children?: CascaderOption[];
};

这个类型定义表示一个级联项，它具有一个字符串标签、一个字符串值和一个可选的子级数组。你可以使用这个类型来定义你的数据。

示例数据

const data: CascaderOption[] = [
  {
    label: 'Option 1',
    value: 'option1',
    children: [
      {
        label: 'Option 1-1',
        value: 'option1-1',
        children: [
          { label: 'Option 1-1-1', value: 'option1-1-1' },
          { label: 'Option 1-1-2', value: 'option1-1-2' },
        ],
      },
      { label: 'Option 1-2', value: 'option1-2' },
    ],
  },
  { label: 'Option 2', value: 'option2' },
];

使用数据类型的组件

你可以在组件中使用这个类型来确保类型安全。例如：

import React, { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';

type CascaderOption = {
  label: string;
  value: string;
  children?: CascaderOption[];
};

type CascaderProps = {
  options: CascaderOption[];
  onChange: (value: CascaderOption | null) => void;
  selectedValue: CascaderOption | null;
};

const Cascader: React.FC<CascaderProps> = ({ options, onChange, selectedValue }) => {
  const [value, setValue] = useState<CascaderOption | null>(null);
  const [currentOptions, setCurrentOptions] = useState<CascaderOption[]>(options);

  const handleChange = (event: any, newValue: CascaderOption | null) => {
    setValue(newValue);
    if (newValue && newValue.children) {
      setCurrentOptions(newValue.children);
    } else {
      setCurrentOptions([]);
      onChange(newValue);
    }
  };

  return (
    <Autocomplete
      options={currentOptions}
      value={value}
      onChange={handleChange}
      getOptionLabel={(option) => option.label}
      renderInput={(params) => <TextField {...params} label="Cascader" />}
      renderOption={(props, option) => (
        <Box component="li" {...props}>
          {option.label}
        </Box>
      )}
      isOptionEqualToValue={(option, value) => option.value === value.value}
    />
  );
};

const App: React.FC = () => {
  const [selectedValue, setSelectedValue] = useState<CascaderOption | null>(null);

  const handleCascaderChange = (newValue: CascaderOption | null) => {
    setSelectedValue(newValue);
    console.log('Selected Value:', newValue);
  };

  return (
    <div>
      <Cascader options={data} onChange={handleCascaderChange} selectedValue={selectedValue} />
      {selectedValue && <div>Selected Value: {selectedValue.label}</div>}
    </div>
  );
};

export default App;

解释

• CascaderOption: 定义了一个级联项的数据类型，包括 label、value 和一个可选的 children 数组。
• CascaderProps: 定义了 Cascader 组件的属性类型，包括 options、onChange 和 selectedValue。
• 在 Cascader 组件中使用 useState 来管理当前选项和选定值，并使用 Autocomplete 组件来显示级联选择器。
• 在 App 组件中管理最终的选择，并将其传递给 Cascader 组件，同时在选择更改时处理逻辑。

这种类型定义和组件结合的方式可以确保你的数据结构和组件的类型安全。