react 多级选择的思路+代码

React 多级选择的思路大致如下：

1. 创建一个组件用于显示选项列表，该组件应该包括当前选项及其子选项列表。

2. 创建一个父组件用于管理所有选项。该组件应该包括当前选项及其子选项，以及用于切换选项的按钮或链接。

3. 父组件应该通过 props 将当前选项和子选项传递给子组件，以便在子组件中显示。

4. 在子组件中，当用户选择一个选项时，应该通知父组件，以便更新当前选项和子选项。

下面是一个简单的多级选择组件的代码示例：

import React, { useState } from 'react';

const options = {
  vegetables: ['carrots', 'peppers', 'lettuce'],
  fruits: ['apples', 'bananas', 'oranges'],
  dairy: ['milk', 'cheese', 'yogurt']
}

function OptionList({ options, onSelect }) {
  const [selectedOption, setSelectedOption] = useState(null);

  function handleOptionSelect(option) {
    setSelectedOption(option);
    onSelect(option);
  }

  return (
    <ul>
      {options.map((option) => (
        <li key={option}>
          <button onClick={() => handleOptionSelect(option)}>
            {option}
          </button>
          {selectedOption === option && (
            <OptionList options={options[option]} onSelect={onSelect} />
          )}
        </li>
      ))}
    </ul>
  );
}

function MultiLevelSelect() {
  const [selectedOptions, setSelectedOptions] = useState([]);

  function handleOptionSelect(option) {
    setSelectedOptions([...selectedOptions, option]);
  }

  return (
    <div>
      <h1>Multi-level Select</h1>
      <OptionList options={options} onSelect={handleOptionSelect} />
      <p>Selected Options: {selectedOptions.join(', ')}</p>
    </div>
  );
}

export default MultiLevelSelect;

在该示例中，我们创建了一个 `OptionList` 组件用于显示选项列表。该组件接收两个 props：`options` 和 `onSelect`。`options` 是一个对象，其中每个键都是一个选项，每个值都是该选项的子选项数组。`onSelect` 是一个回调函数，当用户选择一个选项时，将调用此函数。

在 `OptionList` 组件中，我们使用 `useState` 钩子来跟踪当前选项。当用户选择一个选项时，我们将该选项存储在 `selectedOption` 变量中，并通过 `onSelect` 回调函数通知父组件。

在 `OptionList` 组件中，我们使用 `map` 方法遍历 `options` 对象中的每个选项，并创建一个包含该选项的按钮。如果用户选择了该选项，则我们通过递归创建一个新的 `OptionList` 组件来显示该选项的子选项列表。

在 `MultiLevelSelect` 组件中，我们使用 `useState` 钩子来跟踪选中的选项。当用户选择一个选项时，我们将该选项添加到 `selectedOptions` 数组中，并将其显示在页面上。

最后，我们将 `MultiLevelSelect` 组件导出，以便在其他组件中使用。