Componente de acordeón React-Bootstrap

React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. Componentprovides Podemos usar el siguiente enfoque en ReactJS para usar el componente de acordeón react-bootstrap.

Accesorios de acordeón:

• activeKey: Es la clave actualmente activa que corresponde a la tarjeta expandida que se encuentra actualmente activa.
• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• defaultActiveKey: Es la clave activa predeterminada que se expande al inicio.
• onSelect: es la función de devolución de llamada denominada SelectCallback.
• bsPrefijo: CSS

Accordion.Toggle Props:

• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• eventKey: Es una clave que se utiliza para corresponder al componente de colapso cuando se activa el clic en este componente.
• onClick: es la función de devolución de llamada que se activa cuando se hace clic en este componente.

Acordeón. Accesorios:

• niños: Se utiliza para pasar el apoyo de los niños que debe contener un solo niño.
• eventKey: Es una tecla que se utiliza para corresponder al toggler.

Se utiliza para crear nuestro componente de alternancia personalizado con este gancho. 

• eventKey: Es la clave que se da para el elemento/tarjeta especificado.
• devolución de llamada: es una función de devolución de llamada que se activa en un evento de alternancia.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta , muévase a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install react-bootstrap 
  npm install bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
  
import Accordion from 'react-bootstrap/Accordion';
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';
  
export default function App() {
  return (
    <div style={{ display: 'block', 
                  width: 700, padding: 30 }}>
      <h4>React-Bootstrap Accordion Component</h4>
      <Accordion defaultActiveKey="0">
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Button} 
              variant="link" eventKey="0">
              Click Me to Toggle!
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
             Greetings from GeeksforGeeks
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://react-bootstrap.github.io/components/accordion/