Intenté entender cómo usar tostadas, pero no pude y por eso estoy buscando ayuda aquí. ¿Hay alguna razón por la que usar reaccionar bootstrap sobre bootstrap regular? Empiezo a pensar que no puedo usar todas las funcionalidades de Bootstrap regular en reaccionar

2
Jova 8 jun. 2021 a las 18:31

2 respuestas

La mejor respuesta

Puede usar todas las utilidades de bootstrap liso en reaccionar, pero no se recomienda.

Esto se debe a que para permitir la funcionalidad interactiva, Bootstrap utiliza javascript JQUERY y otro JavaScript, que no siempre juega bien con reaccionar, al que le gusta "poseer" la DOM y cualquier alteración.


Si consulta la sección de uso de Bootstrap Toasts Docs (aquí) ¿Puedes ver que se debe inicializar con JQERY / JS:

Inicialice las tostadas a través de JavaScript:

$('.toast').toast(option)

Esto puede ser desordenado para colocarlo dentro de reaccionar, hay formas de llamarlo dentro de un bloque useEffect(), pero he tenido problemas con cosas similares en el pasado.


Esta es la razón por la que React-Bootstrap es excelente, puede darle componentes pre-hechos con toda esta funcionalidad horneada, que solo puede pasar en su base de código.

Consulte los documentos de reactive-bootstrap para tostadas aquí, se pueden agregar tostadas muy functitonales con sólo:

<Toast>
  <Toast.Header>
     <strong className="mr-auto">Bootstrap</strong>
  </Toast.Header>
  <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>
2
Luke Storry 8 jun. 2021 a las 16:17

Depende de qué versión de Bootstrap estás usando. bootstrap 5 ya no usa jQuery para que los componentes de bootstrap se pueden usar como la tostada sin la necesidad de una biblioteca de terceros como react-bootstrap o reactstrap.

Primero importan los componentes deseados ...

import { Toast } from 'bootstrap';

Luego, instanciate y use según sea necesario ...

const { Toast } = bootstrap;

var toastEl = document.getElementById('myToast');
const bsToast = new Toast(toastEl);
bsToast.show();

Bootstrap 5 tostadas con reaccionar

0
Zim 8 jun. 2021 a las 17:10