Создание вложенного раскрывающегося списка с помощью React-Bootstrap

Выпадающий список — это набор параметров, в котором вы можете нажать кнопку, и появится меню. Вы можете добавить функцию к каждому элементу.

В React-Bootstrap вы можете создать выпадающее меню с помощью Dropdown component. См. приведенный ниже код в качестве примера.

import React from "react";
import { Container, Dropdown } from "react-bootstrap";
export default class Home extends React.Component {
  render() {
    return (
      <Container>
        <Dropdown autoClose="outside">
          <Dropdown.Toggle variant="primary">
            Dropdown
          </Dropdown.Toggle>
          <Dropdown.Menu>
            <Dropdown.Item>Item 1</Dropdown.Item>
            <Dropdown.Item>Item 2</Dropdown.Item>
            <Dropdown.Item>Item 3</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Container>
    );
  }
}

Иногда вам нужен вложенный раскрывающийся список. Мы можем открыть подменю с опциями в опции. Но в React-Bootstrap нет вложенного раскрывающегося списка. Итак, нам нужно создать собственный вложенный выпадающий компонент.

Создать компонент NestedDropdown

Этот компонент будет элементом раскрывающегося списка React-Bootstrap с именем NestedDropdown. Компонент NestedDropdown будет иметь заголовок и дочерние элементы в виде раскрывающихся элементов.

import React from "react";
import { Dropdown } from "react-bootstrap";
export default class NestedDropdown extends React.Component {
  render() {
    return (
      <Dropdown.Item>
        <Dropdown variant="primary" drop="end" autoClose="outside">
          <Dropdown.Toggle>{this.props.title}</Dropdown.Toggle>
          <Dropdown.Menu>
            {this.props.children}
          </Dropdown.Menu>
        </Dropdown>
      </Dropdown.Item>
    );
  }
}

Затем мы используем компонент NestedDropdown как дочерний элемент Dropdown.Menu.

import React from "react";
import { Container, Dropdown } from "react-bootstrap";
import NestedDropdown from "./NestedDropdown";
export default class Home extends React.Component {
  render() {
    return (
      <Container>
        <Dropdown autoClose="outside">
          <Dropdown.Toggle variant="primary">
            Dropdown
          </Dropdown.Toggle>
          <Dropdown.Menu>
            <Dropdown.Item>Item 1</Dropdown.Item>
            <Dropdown.Item>Item 2</Dropdown.Item>
            <NestedDropdown title="Item 3">
              <Dropdown.Item>Item 3.1</Dropdown.Item>
              <Dropdown.Item>Item 3.2</Dropdown.Item>
              <Dropdown.Item>Item 3.3</Dropdown.Item>
            </NestedDropdown>
          </Dropdown.Menu>
        </Dropdown>
      </Container>
    );
  }
}

Результат будет выглядеть так.

Добавьте стили к компоненту NestedDropdown

На данный момент компонента NestedDropdown достаточно для добавления подменю. Но кнопка в меню, похоже, немного не работает. Итак, мы удалим кнопку и сделаем ее похожей на другие элементы. Для этого мы можем реализовать Пользовательский выпадающий компонент React-Bootstrap.

import React from "react";
import { Dropdown, Container } from "react-bootstrap";
export default class NestedDropdown extends React.Component {
  render() {
    const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
      <Container
        fluid
        className="px-0 d-flex justify-content-between"
        ref={ref}
        onClick={(e) => {
          e.preventDefault();
          onClick(e);
        }}
      >
        <span>{children}</span>
        <span>&#9656;</span>
      </Container>
    ));
    return (
      <Dropdown.Item>
        <Dropdown variant="primary" drop="end" autoClose="outside">
          <Dropdown.Toggle as={CustomToggle}>{this.props.title}  </Dropdown.Toggle>
          <Dropdown.Menu>
            {this.props.children}
          </Dropdown.Menu>
        </Dropdown>
      </Dropdown.Item>
    );
  }
}

Затем кнопка будет удалена, а стили будут выглядеть как другие элементы. С помощью этого нового стиля мы также можем добавить треугольник, указывающий вправо, чтобы показать, что у элемента есть подменю. Вот как выглядит новый вложенный раскрывающийся список.

Итак, это все о том, как создать вложенный раскрывающийся список с помощью React-Bootstrap. Полный код доступен здесь.

Спасибо за прочтение. Следуйте за мной для получения дополнительных статей об учебных пособий по программированию.