Reactstrap Bootstrap 导航栏在 React 应用程序中不起作用

Question

我使用“创建反应应用程序”创建了一个反应应用程序。

我现在正在尝试从 Reactstrap 添加导航栏。我从 Reactstrap 复制粘贴（我将其添加为一个反应组件）网站：

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>
    );
  }
}

而且它不起作用。我在我的反应应用程序中得到了这个：

我之前在 Bootstrap、React 和 Navbar 上也遇到过类似的问题，但我真的很惊讶它竟然发生在 Reactstrap 中。 你知道为什么会这样吗？

Answer 1

你还需要bootstrap和react-dom：

npm install --save bootstrap
npm install --save reactstrap react react-dom

---

import 'bootstrap/dist/css/bootstrap.css';
import { Button } from 'reactstrap'; 

Answer 2

您应该确保您拥有

import 'bootstrap/dist/css/bootstrap.css';

导入到创建 React 应用程序时自动创建的

index.js

文件中。

Answer 3

你可以做到这一点。

import { NavLink } from 'reactstrap';
import { NavLink as ReactLink } from 'react-router-dom';

<NavLink tag={ReactLink} to="/home" activeClassName="active" >Home</NavLink>

Answer 4

虽然没有记录，但您必须按如下方式与react-router一起使用：

<NavLink tag={Link} to="/somewhere">

即：

import React from 'react';
import { Link } from 'react-router';
import { NavLink } from 'reactstrap';

const Example = (props) => {
  return (
    <NavLink tag={Link} to="/somewhere">
      {props.item.name}
    </NavLink>
  );
};

Answer 5

安装即可

npm install bootstrap
npm install jquery 

然后将它们导入index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import "jquery/dist/jquery.min.js";
import 'bootstrap/dist/js/bootstrap.bundle'

它对我有用，但我无法切换。

如需更多功能，您也可以安装 popper