Hola y gracias por la ayuda, estoy usando Bootstrap 5 para diseñar una aplicación en React, pero tengo problemas para incluir el componente js de Bootstrap. Aquí les comparto el código de cómo hago la importación.
import "bootstrap/dist/css/bootstrap.css"; import { Dropdown } from "bootstrap"; function App() { return ( <div> <div className="dropdown"> <a className="btn btn-secondary dropdown-toggle" href="#/" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown link </a> <ul className="dropdown-menu" aria-labelledby="dropdownMenuLink"> <li><a className="dropdown-item" href="#/">Action</a></li> <li><a className="dropdown-item" href="#/">Another action</a></li> <li><a className="dropdown-item" href="#/">Something else here</a></li> </ul> </div> </div> ); } export default App; Al ejecutar el código con npm start la aplicación funciona bien y no tengo ningún problema con el componente de arranque que muestra el menú desplegable. El problema es que en la consola me sale un aviso es el siguiente:
ADVERTENCIA en src\component\Sidebar.jsx Línea 5:10: 'Dropdown' está definido pero nunca se usa no-unused-vars
webpack 5.65.0 compilado con 1 advertencia en 696 ms
Entiendo que tengo que definir Dropdown en alguna parte, pero no sé dónde y cómo. Agradezco la ayuda de antemano. La solución a esta pregunta es una forma de eliminar la abstinencia utilizando buenas prácticas. Bueno, una solución simple es agregar: // eslint-disable-next-line and esLint no lo mostraría, pero esta no es una solución definitiva.
Actualizar
https://codesandbox.io/s/loving-platform-q6sqy?file=/src/App.js ejemplo en codesandbox
Esto es correcto, debe eliminar la segunda importación al importar la clase desplegable de la biblioteca de arranque, no un componente de React, por lo que esta segunda importación no funcionará. Si desea usarlo como un componente de React, debe instalar react-bootstrap.
Como solo está utilizando clases de arranque, está listo para comenzar, esta primera importación es una forma correcta de importar CSS de arranque en el proyecto.
Importar {Dropdown} significa que lo usará como una etiqueta como esta: <Dropdown> . Si desea usar la clase desplegable como lo está haciendo, supongo que solo importar bootstrap sería suficiente. Entonces no necesita la segunda línea de importación.
Editar: el menú desplegable bootstrap requiere css y js bootstrap. Así que elimine la segunda importación con import "bootstrap/dist/js/bootstrap.js"
Logré importar el js del componente bootstrap 5, sin errores. Aquí el código
import "bootstrap/dist/css/bootstrap.css"; import "bootstrap/js/dist/dropdown.js"; function App() { return ( <div> <div className="dropdown"> <a className="btn btn-secondary dropdown-toggle" href="/" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false" > Dropdown link </a> <ul className="dropdown-menu" aria-labelledby="dropdownMenuLink"> <li> <a className="dropdown-item" href="/"> Action </a> </li> <li> <a className="dropdown-item" href="/"> Another action </a> </li> <li> <a className="dropdown-item" href="/"> Something else here </a> </li> </ul> </div> </div> ); } export default App;