J'ai créé une application de réaction avec "create react-app".
J'essaie maintenant d'ajouter une barre de navigation depuis Reactstrap. Je fais un copier-coller à partir de Reactstrap (j'ajoute ceci comme un composant de réaction) site Web :
import React from 'react'; import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; export default class Example extends React.Component { constructor(props) { super(props); this.toggle = this.toggle.bind(this); this.state = { isOpen: false }; } toggle() { this.setState({ isOpen: !this.state.isOpen }); } render() { return ( <div> <Navbar color="light" light expand="md"> <NavbarBrand href="/">reactstrap</NavbarBrand> <NavbarToggler onClick={this.toggle} /> <Collapse isOpen={this.state.isOpen} navbar> <Nav className="ml-auto" navbar> <NavItem> <NavLink href="/components/">Components</NavLink> </NavItem> <NavItem> <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink> </NavItem> <UncontrolledDropdown nav inNavbar> <DropdownToggle nav caret> Options </DropdownToggle> <DropdownMenu right> <DropdownItem> Option 1 </DropdownItem> <DropdownItem> Option 2 </DropdownItem> <DropdownItem divider /> <DropdownItem> Reset </DropdownItem> </DropdownMenu> </UncontrolledDropdown> </Nav> </Collapse> </Navbar> </div> ); } }
et cela ne fonctionne pas. Je reçois ceci dans mon application de réaction:
J'ai eu des problèmes similaires avec Bootstrap, React et Navbar avant mais je suis vraiment surpris cela se passe dans Reactstrap. Savez-vous pourquoi?
3 Réponses :
Vous pouvez le faire.
import { NavLink } from 'reactstrap'; import { NavLink as ReactLink } from 'react-router-dom'; <NavLink tag={ReactLink} to="/home" activeClassName="active" >Home</NavLink>
Vous devez également bootstrap et react-dom:
import 'bootstrap/dist/css/bootstrap.css'; import { Button } from 'reactstrap';
npm install --save bootstrap npm install --save reactstrap react react-dom
Vous devez vous assurer que
import 'bootstrap/dist/css/bootstrap.css';
a été importé dans le fichier index.js
créé automatiquement lorsque vous créez l'application react.
vous devez importer le css
import 'bootstrap / dist / css / bootstrap.min.css';
comme indiqué dans la documentation reactstrap.github.ioMerci! Cela marche. J'ai aussi ajouté bootstrap. Je ne savais pas que je devrais le faire en plus en utilisant Reactstrap. Merci pour l'aide!