Как реализовать многоуровневый выпадающий список на react.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import React, { useState } from 'react';

function Dropdown({ options }) {
  const [value, setValue] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleOptionClick = (option) => {
    setValue(option);
    setIsOpen(false);
  };

  return (
    <div className="dropdown">
      <div className="dropdown__toggle" onClick={() => setIsOpen(!isOpen)}>
        {value ? value.label : 'Select an option'}
      </div>
      {isOpen && (
        <ul className="dropdown__options">
          {options.map((option) => (
            <li key={option.value} onClick={() => handleOptionClick(option)}>
              {option.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default Dropdown;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.dropdown {
  position: relative;
}

.dropdown__toggle {
  display: inline-block;
  padding: 8px 16px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.dropdown__options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dropdown__options li {
  padding: 8px 16px;
  cursor: pointer;
}

.dropdown__options li:hover {
  background-color: #f1f1f1;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

const options = [
  {
    label: 'Option 1',
    value: 'option1',
    children: [
      {
        label: 'Suboption 1.1',
        value: 'suboption1.1',
      },
      {
        label: 'Suboption 1.2',
        value: 'suboption1.2',
      },
    ],
  },
  {
    label: 'Option 2',
    value: 'option2',
  },
];

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import React, { useState } from 'react';

function Dropdown({ options }) {
  const [value, setValue] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleOptionClick = (option) => {
    if (option.children) {
      setIsOpen(!isOpen);
    } else {
      setValue(option);
      setIsOpen(false);
    }
  };

  const renderOptions = (options) => {
    return (
      <ul className="dropdown__options">
       

1
2
3
4
5
6
7

  {options.map((option) => (
    <li key={option.value} onClick={() => handleOptionClick(option)}>
      {option.label}
      {isOpen && option.children && renderOptions(option.children)}
    </li>
  ))}
</ul>