Выпадающий список — это набор параметров, в котором вы можете нажать кнопку, и появится меню. Вы можете добавить функцию к каждому элементу.
В 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>▸</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. Полный код доступен здесь.
Спасибо за прочтение. Следуйте за мной для получения дополнительных статей об учебных пособий по программированию.